ซ่อน/แสดงเนื้อหาในเว็บเพจ โดยใช้ JavaScript

การทำ Link ให้ผู้ใช้กดเพื่อ ซ่อน/แสดง เนื้อหาในเว็บเพจ สามารถทำได้โดยใช้ JavaScript และเนื้อหาที่อยู่ในแท็บ DIV ดังนี้ครับ

ตัวอย่าง: ลองกดดูสิครับ !!

.

1. โค้ด JavaScript สำหรับฟังก์ชันสำหรับ ซ่อน/แสดง เนื้อหา (Copy โค้ด JavaScript ด้านล่างนี้ไปวางในไฟล์ html)

<script type=“text/javascript” language=“JavaScript”><!–
function HideContent(d) {
document.getElementById(d).style.display = “none”;
}
function ShowContent(d) {
document.getElementById(d).style.display = “block”;
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == “none”) { document.getElementById(d).style.display = “block”; }
else { document.getElementById(d).style.display = “none”; }
}
//–></script>
 

.

2. ส่วนเนื้อหาที่อยู่ใน DIV (ใช้โค้ดด้านล่างนี้สำหรับส่วนที่จะ ซ่อน/แสดง เนื้อหา)

<div id=“uniquename” style=“display:none;”>
<p>ใส่เนื้อหาตรงนี้ครับ</p>
</div>

.

3. โค้ดสำหรับสร้าง Link ให้ผู้ใช้กดเพื่อซ่อนหรือแสดงเนื้อหาในข้อ 2

<a href=“javascript:ReverseDisplay(’uniquename’)”>
กดที่นี่เพื่อ แสดง/ซ่อน เนื้อหา
</a>

.

จบแล้วครับ ลองนำไปประยุกต์ใช้กับการออกแบบเว็บ เผื่อจะเป็นประโยชน์ได้บ้างครับ


 
 
 

One Response to “ซ่อน/แสดงเนื้อหาในเว็บเพจ โดยใช้ JavaScript”

  1. kakazz
    27. June 2008 at 21:45

    เฮ้ย เนี่ยล่ะสิ่งที่ต้องการมานาน
    ขอบคุณครับ

    เออเราเช่า hosting ของ 3ix
    ราคา $12 USD = 10 G ล่ะ

Leave a Reply