(หน้านี้มีการใช้ CSS สไตล์ชีท)
ทดลองกดเมนูเพื่อดูความเปลี่ยนแปลง
ข้อความนี้อยู่ในไอเท็ม 1 ซึ่งจะไม่แสดง หากท่านไม่กดลิ้งที่กำหนดเป็น "#item1".
หากท่านกดลิ้งไอเท็ม 2 ท่านจะเห็นข้อความนี้
ท่านจะเห็นข้อความนี้เมื่อกดไอเท็มสาม จะสังเกตได้ว่าไอเท็มแต่ละอันเป็น URL ท่านสามารถนำไปวางไว้หน้าเพจใดก็ได้ เมื่อต้องการลิ้งมายังไอเท็มนี้โดยตรง
การทำงานของเมนู มีสองส่วนด้วยกัน คือ ส่วน HTML ที่ลิ้งมายังอีเลเมนต์ตามไอดีที่กำหนดไว้ และส่วน property 'display':
<p> <a href="#item1">ไอเท็ม 1</a> <a href="#item2">ไอเท็ม 2</a> <a href="#item3">ไอเท็ม 3</a> <a href="#default">เคลียร์</a> <div class="items"> <p id="item1">... ไอเท็ม 1... <p id="item2">... ไอเท็ม 2... <p id="item3">... <p id="default"><!-- ค่าเริ่มต้น, ไม่แสดงข้อความใดๆ --> </div>
สไตล์ชีทจะกำหนดให้ซ่อนอีเลเมนต์ P ทั้งหมดใน DIV แต่เมื่อมีการเรียก P เป็น target (กดลิ้ง) จึงจะแสดงข้อความ:
div.items p {display: none} div.items p:target {display: block}
ท่านอาจกำหนด สี, margin, ขอบ, อื่นๆ เพื่อให้ดูเหมือนเมนู โดยท่านสามารถดูซอร์สของหน้านี้เพื่อเป็นศึกษาการทำงานได้
ซึ่งตามจริงแล้วเรายังใส่ ':not(:target)', เพื่อให้เบราเซอร์ที่ไม่รองรับ CSS3 ยังแสดงอีเลเมนต์อยู่ ดังนั้นสไตล์ชีทจะเป็นดังนี้:
div.items p:not(:target) {display: none} div.items p:target {display: block}
เมื่อท่านเข้าใจการทำงานข้างต้นแล้ว ท่านสามารถสร้างปุ่มแท็บได้ไม่ยาก โดยสร้างสไตล์ชีทกำหนดลักษณะของปุ่มที่ใ้ช้แสดงเนื้อหาเพิ่มเติมเท่านั้น
ตัวอย่างด้านล่างนี้ เราจะใช้ 'z-index' แทน 'display: none' ท่านสามารถเปิดซอร์สเพื่อดูการทำงานของตัวอย่างได้
เนื้อหาในหน้านี้ดัดแปลงมาจากต้นฉบับของ Daniel Glazman.ท่านสามารถอ่าน คำอธิบาย ได้ในบล็อกเดือน มกรา 9, 2003 และดู ตัวอย่าง ในเดือนมกรา 13.