CSS: การทำปุ่มแท็บ

รู้จักซีเล็คเตอร์ ':target'

ตามปกติเราใช้ URL เพื่อลิ้งไปยังหน้าเพจที่เราต้องการ แต่เราสามารถลิ้งไปยังส่วนเฉพาะของหน้าได้โดยใช้ไอดีซึ่งจะทำให้ URL ลงท้ายเป็น"#ชื่อไอดี" ซึ่งเมื่อเบราเซอร์เห็น URL ดังกล่าวจะพยายามแสดงอีเลเมนต์ที่มีไอดีนั้นไว้ส่วนบนสุดของหน้าต่าง จากสมบัตินี้ เมื่อท่านใช้ไอดีร่วมกับซีเล็คเตอร์ ':target' ท่านสามารถ เพิ่มสไตล์ให้อีเลเมนต์นั้น หรือทำอินเตอร์เฟส เพื่อเป็นการเน้นความสนใจได้อีกด้วย

ตัวอย่าง ท่านอาจทำการซ่อนอีเลเมนต์เมื่อไม่ใช่ target และแสดงอีเลเมนต์เมื่อเป็น target เป็นต้น ตัวอย่างด้านล่างแสดงเมนูที่มีสี่ไอเท็ม ซึ่งแต่ละไอเท็มจะลิ้งไปยังข้อความ แต่เมื่อไม่มีการกดลิ้งจะไม่มีการแสดงข้อความใดๆ เมื่อลิ้งถูกกดจึงจะแสดงข้อความเท่านั้น

ทดลองกดเมนูเพื่อดูความเปลี่ยนแปลง

ข้อความนี้อยู่ในไอเท็ม 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' ท่านสามารถเปิดซอร์สเพื่อดูการทำงานของตัวอย่างได้

Tab 1

One might well argue, that...

Tab 2

... 30 lines of CSS is rather a lot, and...

Tab 3

... that 2 should have been enough, but...

Default

... it works!

กิตติกรรมประกาศ

เนื้อหาในหน้านี้ดัดแปลงมาจากต้นฉบับของ Daniel Glazman.ท่านสามารถอ่าน คำอธิบาย ได้ในบล็อกเดือน มกรา 9, 2003 และดู ตัวอย่าง ในเดือนมกรา 13.

เว็บสไตล์ชีท CSS ทิป & ทริค

รู้จักซีเล็คเตอร์ ':target'

สร้างปุ่มแท็บ

กิตติกรรมประกาศ

เว็บสไตล์ชีท
CSS ทิป & ทริค