ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

 

การใช้ Javascript กับ Css เปิด/ปิดการแสดงผลเนื้อหา Toggle ตัวอย่างนี้เป็น Javascript จัดการกับ element โดยใช้ style display กำหนดให้แสดง ไม่แสดงข้อมูลภายใน tag ที่ต้องการ

โค้ด Javascript

<script language="javascript">
function toggle(targetId) {
target = document.all(targetId);
if (target.style.display == "none"){
target.style.display="";
} else {
target.style.display="none";
}
}
//-->
</script>

โค้ด html

<a href="javascript:toggle('Link1')">Link 1 </a>
<div id="Link1" style="display: none">

ข้อมูลที่ต้องการปิดไว้ก่อน รอให้กด คำว่า Link1 แล้วค่อยแสดงออกมา

</div>
</div>
<br><br>
<a href="javascript:toggle('Link2')">Link 2</a>
<div id="Link2" style="display: none">
ข้อมูลที่ต้องการปิดไว้ก่อน รอให้กด คำว่า Link2 แล้วค่อยแสดงออกมา
</div>
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดสินค้าขาย
โดย milk2533 อ 24 พ.ย. 2020 12:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
4
อ 24 พ.ย. 2020 12:49 pm โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 11:17 am บอร์ด Share Knowledge
0
6
อ 24 พ.ย. 2020 11:17 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 11:15 am บอร์ด Share Knowledge
0
3
อ 24 พ.ย. 2020 11:15 am โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 10:51 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
4
อ 24 พ.ย. 2020 10:51 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 10:45 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
3
อ 24 พ.ย. 2020 10:45 am โดย milk2533
เทคนิคการใช้งานเว็บไซต์ mindphp Tip&Trick
โดย milk2533 อ 24 พ.ย. 2020 9:50 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
5
อ 24 พ.ย. 2020 9:50 am โดย milk2533
แนะนำเว็บไซต์ mindphp.com
โดย milk2533 อ 24 พ.ย. 2020 9:48 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
9
อ 24 พ.ย. 2020 9:48 am โดย milk2533
งานประจำวันที่ 24 พฤศจิกายน 2563
โดย milk2533 อ 24 พ.ย. 2020 9:38 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
40
อ 24 พ.ย. 2020 9:38 am โดย milk2533