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

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


คลิกเพื่อเพิ่ม 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>

บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

25 Sep 08 jquery สคริปแรกของคุณ อ่าน 1451 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 1448 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 1441 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 1399 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 1342 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 1310 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 1305 16 Aug 09 jQuery UI คือ อะไร อ่าน 1272 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 1269 25 Sep 08 Event ของ jquery แบบ Basic อ่าน 1268 25 Sep 08 สิ่งจำเป็นก่อนการทำงานของโปรแกรม อ่าน 1267 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Attribute อ่าน 1255 22 Aug 09 เรียกใช้งาน jQuery ผ่าน Google API อ่าน 1255 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 2 อ่าน 1224 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 1224
จำนวนผู้เยี่ยมชม 88244 คน 2010 © Copyright ninenik.com. All rights reserved.