ตัวอย่างโค้ดสำหรับการซ่อน แสดงเนื้อหา ประยุกต์แสดงส่วนสำหรับล็อกอิน
ไว้ส่วนบนของเว็บไซต์ แสดง หรือซ่อนเมื่อคลิกที่ลิ้งค์ โดยใช้คำสั่ง slideToggle ของ jQuery
สามารถนำไปดัดแปลง css และการจัดวางตำแหน่งต่างๆ ได้ตามต้องการ
ตัวอย่าง
ตัวอย่างโค้ดทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>slde down up</title><style type="text/css">body{ padding:0px; margin:0px; }div#login_div{ position:relative; margin:auto; display:none; width:100%; height:150px; background-color:#FFFFCC;}div#main_div{ position:relative; display:block; margin:auto; width:970px; height:1000px; background-color:#FFCCCC; }</style></head><body><div id="login_div">ส่วนของเนื้อหาสำหรับล็อกอิน</div><div id="main_div"><div id="login_anchor"><a id="login_anchor_a" href="#">เข้าสู่ระบบ / สมัครสมาชิก</a></div></div><script type="text/javascript"> $(function(){ $("#login_anchor_a").click(function(){ $("#login_div").slideToggle(); });}); </script> </body></html> |
