Disclaimer: This page is a Thai translation of the World Wide Web Consortium's page. This translation was written by Aliasa Brookshield, and may contain translation errors. For the original english version, please see Original Document


คำปฏิเสธความรับผิดชอบ : บทความในหน้านี้เป็นบทความแปลซึ่งอาจมีข้อผิดพลาดจากการแปลเกิดขึ้น   เอกสารต้นฉบับ เป็นของ W3C ซึ่งอาจมีการเปลี่ยนแปลงปรับปรุงเนื้อหา ท่านควรดูต้นฉบับประกอบการอ่านเพื่อความถูกต้อง

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

(หน้านี้มีการใช้ CSS สไตล์ชีท)

ซีเล็คเตอร์ target

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

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

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


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

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


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


ข้อความนี้อยู่ในไอเท็ม 1 ซึ่งจะไม่แสดง หากท่านไม่กดลิ้งที่กำหนดเป็น "#item1".

หากท่านกดลิ้งไอเท็ม 2 ท่านจะเห็นข้อความนี้

ท่านจะเห็นข้อความนี้เมื่อกดไอเท็มสาม จะสังเกตได้ว่าไอเท็มแต่ละอันเป็น URL ท่านสามารถนำไปวางไว้หน้าเพจใดก็ได้ เมื่อต้องการลิ้งมายังไอเท็มนี้โดยตรง

ไอเท็ม 1 ไอเท็ม 2 ไอเท็ม 3 เคลียร์

การทำงานของเมนู มีสองส่วนด้วยกัน คือ ส่วน 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 Valid CSS!Valid HTML 4.0!

Bert Bos
เขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT