ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS
25 September 2008
ตัวอย่าง พร้อมโค้ดประกอบด้านล่าง
คลิกเพื่อเพิ่ม 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
04 Oct 11 การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย อ่าน 848 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4476 10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 3205 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4316 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 1963 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3108 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 1963 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2515 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 6919 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 3194 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2649 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 3920 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 3035 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 5589 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 5587 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3086 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5562 29 Oct 08 สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย อ่าน 6283 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 2235 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24539