องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS
สร้างอินเทอร์เฟซแท็บด้วยเทคนิค CSS :checked และเปรียบเทียบกับแนวทาง JavaScript
องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ข้อกำหนดของคอมโพเนนต์แท็บ
คอมโพเนนต์แท็บต้องมีตัวบ่งชี้แท็บที่ใช้งานอยู่ในเชิงภาพ แผงที่สัมพันธ์กันซึ่งแสดงหรือซ่อนเมื่อเลือก การนำทางระหว่างแท็บด้วยแป้นพิมพ์ และแอตทริบิวต์ ARIA ที่เข้าถึงได้ สิ่งเหล่านี้ทำได้ด้วย CSS ล้วนโดยใช้วิธี :checked หรือใช้ JavaScript เพื่อการเข้าถึงที่ดียิ่งขึ้น
วิธีแก้ด้วย :checked
อินพุต radio ที่ซ่อนไว้ทำหน้าที่เก็บสถานะ โดยแต่ละแท็บเป็น <label> ที่เชื่อมโยงกับอินพุต radio เมื่อ radio ถูกเลือก ตัวเชื่อมพี่น้องของ CSS จะแสดงแผงที่ตรงกันและจัดรูปแบบป้ายกำกับของแท็บที่ใช้งานอยู่ โดยไม่ต้องใช้ JavaScript เลย
<div class="tabs">
<input type="radio" name="tabs" id="tab-1" checked hidden />
<label for="tab-1">Tab One</label>
<div id="panel-1">Panel one content</div>
</div>
สถาปัตยกรรม CSS แบบ :checked
วางอินพุต radio ตามด้วยป้ายกำกับทั้งหมด (แท็บ) แล้วจึงวางแผงทั้งหมดไว้ในคอนเทนเนอร์เดียวกัน ใช้ตัวเชื่อมพี่น้องทั่วไป (~) เพื่อเชื่อม radio ที่ถูกเลือกกับแผงที่ตรงกัน แผงจะมีค่าเริ่มต้นเป็น display: none ส่วนแผงที่ตรงกันจะได้รับ display: block
ข้อจำกัดของวิธี :checked
วิธี :checked ไม่สามารถอัปเดตแอตทริบิวต์ ARIA (aria-selected, aria-controls) ไม่สามารถเปิดใช้การนำทางระหว่างแท็บด้วยปุ่มลูกศร และข้อจำกัดด้านลำดับของ DOM (อินพุตต้องอยู่ก่อนแผง) อาจขัดแย้งกับข้อกำหนดด้านการออกแบบเชิงภาพ ช่องว่างเหล่านี้จำกัดการเข้าถึงที่แท้จริง
คอมโพเนนต์แท็บด้วย JavaScript
คอมโพเนนต์แท็บที่ใช้ JS จะรับฟังเหตุการณ์คลิกบนปุ่มแท็บ กำหนด aria-selected ให้แท็บที่ใช้งานอยู่ อัปเดต aria-hidden ให้แผง และจัดการโฟกัส วิธีนี้รองรับการทำงานตาม ARIA ได้อย่างครบถ้วนและรูปแบบการโต้ตอบด้วยแป้นพิมพ์ตามแนวทางการสร้าง ARIA
บทบาท ARIA สำหรับแท็บ
ใช้ role="tablist" กับคอนเทนเนอร์ ใช้ role="tab" กับปุ่มแท็บแต่ละปุ่ม พร้อม aria-selected และ aria-controls และใช้ role="tabpanel" กับแต่ละแผง พร้อม aria-labelledby โปรแกรมอ่านหน้าจอจะแจ้งจำนวนแท็บ ตำแหน่ง และสถานะที่เลือก
รูปแบบการโต้ตอบด้วยแป้นพิมพ์
แนวทางการสร้าง ARIA สำหรับแท็บมีดังนี้: ปุ่มแท็บจะเข้าสู่รายการแท็บและโฟกัสแท็บที่ใช้งานอยู่เมื่อกดปุ่มแท็บ ปุ่มลูกศรซ้ายหรือขวาจะเลื่อนไปมาระหว่างแท็บ ปุ่มต้นทางหรือท้ายทางจะข้ามไปยังแท็บแรกหรือแท็บสุดท้าย การเลื่อนด้วยปุ่มลูกศรแต่ละครั้งจะเปิดใช้แท็บที่โฟกัสอยู่ (รูปแบบการเปิดใช้งานอัตโนมัติ)
CSS สำหรับสถานะที่ใช้งานอยู่
จัดรูปแบบแท็บที่ใช้งานอยู่ด้วยเส้นขอบด้านล่างหรือการเปลี่ยนพื้นหลังโดยใช้ตัวเลือก [aria-selected="true"] ซึ่งทำงานได้ทั้งกับวิธี JS และวิธี :checked วิธีนี้ทำให้ CSS สอดคล้องกับแอตทริบิวต์สถานะของ ARIA และหลีกเลี่ยงการจัดการสถานะซ้ำซ้อน
<div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
<button role="tab" aria-selected="false">Details</button>
</div>
ตัวบ่งชี้แบบเคลื่อนไหว
ตัวบ่งชี้แท็บแบบเคลื่อนไหวจะเลื่อนไปมาระหว่างแท็บ โดยวางองค์ประกอบตัวบ่งชี้ในตำแหน่งแบบสัมบูรณ์ ใช้ JavaScript กำหนดตำแหน่งด้านซ้ายและความกว้างให้ตรงกับขนาดของแท็บที่ใช้งานอยู่ แล้วทำให้เคลื่อนไหวด้วย transition: left 200ms ease, width 200ms ease
การล้นของแท็บที่รองรับหน้าจอหลายขนาด
เมื่อแท็บล้นคอนเทนเนอร์บนหน้าจอขนาดเล็ก ให้ใช้การเลื่อนในแนวนอน (overflow-x: auto; scrollbar-width: none) หรือยุบแท็บเป็นเมนูแบบเลือกบนอุปกรณ์เคลื่อนที่ วิธีใช้เมนูแบบเลือกจำเป็นต้องใช้ JS เพื่อซิงค์เมนูเลือกดั้งเดิมกับการแสดงผลของแผงแท็บ
CSS ล้วนเทียบกับ JS: ควรใช้แต่ละแบบเมื่อใด
ใช้กลวิธีแฮ็ก :checked กับส่วนติดต่อผู้ใช้แบบเรียบง่ายที่ไม่สำคัญมาก และการเข้าถึงไม่ใช่ข้อจำกัดสำคัญลำดับต้น ใช้แท็บ JavaScript กับอินเทอร์เฟซสำหรับใช้งานจริงที่รองรับผู้ใช้แป้นพิมพ์ ผู้ใช้โปรแกรมอ่านหน้าจอ หรือแอปพลิเคชันที่ต้องเป็นไปตาม ARIA ในการตรวจสอบหรือข้อกำหนดทางกฎหมาย
ตรวจสอบความรู้
ข้อจำกัดหลักด้านการเข้าถึงของกลวิธีแฮ็ก CSS :checked สำหรับแท็บคืออะไร
สรุป
กลวิธีแฮ็ก :checked ทำให้สลับแท็บด้วย CSS ล้วนได้โดยใช้อินพุตแบบปุ่มตัวเลือกและตัวเชื่อมพี่น้อง แต่ขาดการรองรับ ARIA และการเข้าถึงด้วยแป้นพิมพ์ แท็บ JavaScript ที่ใช้บทบาท ARIA (tablist, tab, tabpanel) การจัดการ aria-selected และการรองรับปุ่มลูกศร จะมอบประสบการณ์ที่สมบูรณ์และเข้าถึงได้ตามที่จำเป็นสำหรับคอมโพเนนต์ที่ใช้งานจริง
คำถามที่พบบ่อย
บทเรียน “องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS”
สร้างอินเทอร์เฟซแท็บด้วยเทคนิค CSS :checked และเปรียบเทียบกับแนวทาง JavaScript คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS
- การจัดรูปแบบโมดัลและกล่องโต้ตอบ
- รูปแบบเมนูดรอปดาวน์และป๊อปโอเวอร์
- องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS