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

25 September 2008 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

jquery css class

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

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

คลิกเพื่อเพิ่ม 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ

25 Sep
2008

รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 9,593
สมมติ xxx คือ selector รูปแบบที่ 1 $("xxx").css(name); name ค

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

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ