ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS
ตัวอย่าง พร้อมโค้ดประกอบด้านล่าง
คลิกเพื่อเพิ่ม class ฃื่อ show_demo เข้าไปในแท็ก div
คลิกเพื่อเอา class ฃื่อ show_demo ออกจากแท็ก div
โค้ตประกอบ
คลิกเพื่อเพิ่ม 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
