PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS

25 September 2008 By Ninenik Narkdee
class css jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ class css jquery



ตัวอย่าง พร้อมโค้ดประกอบด้านล่าง


คลิกเพื่อเพิ่ม class ฃื่อ show_demo เข้าไปในแท็ก div


ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ


คลิกเพื่อเอา class ฃื่อ show_demo ออกจากแท็ก div
โค้ตประกอบ
<html>  
<head>  
<title>demo</title>  
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>  
<script language="javascript">  
    $(function(){   
        $("a#demo").click(function(){    
                $("div#me").addClass("show_demo");   // เพิ่มคลาส
                return false;
        });    
        $("a#demo2").click(function(){    
                $("div#me").removeClass("show_demo");   // ลบคลาส
                return false;
        });            
    });   
</script>  
<style type="text/css">  
.show_demo{   
    width:120px;height:150px;   
    border:1px solid #cccccc;   
    background-color:#999999;   
    padding:5px;   
    overflow:visible;
}   
</style>  
</head>
<body>
<br />  
<br />  <br />  
  
<a href="#" id="demo">คลิกเพื่อเพิ่ม class ฃื่อ show_demo เข้าไปในแท็ก div </a><br />  
<br />  
<br />  
<div id="me">  
ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ ข้อมูลทดสอบ </div>  
<br />  
<br />  
<a href="#" id="demo2">คลิกเพื่อเอา class ฃื่อ show_demo ออกจากแท็ก div </a><br />
</body>
</html>


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



บริการเว็บ server web hosting
บริการเว็บ server web hosting


Tags:: jquery class css







URL สำหรับอ้างอิง