PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

25 September 2008 By
css class jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css class 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>






Tags:: jquery class css






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


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