PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery

ตัวอย่างการใช้งานฟังก์ชันของ 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

Tags:: jquery class css

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