ลิงก์การนำทางและสถานะแอ็กทีฟ
สร้างการนำทางที่มีสถานะแอ็กทีฟชัดเจนด้วย className และ aria-current ทำให้ลิงก์เข้าถึงได้และเหมาะกับหน้าจอขนาดเล็ก
ลิงก์การนำทางและสถานะแอ็กทีฟ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุผลที่สถานะใช้งานอยู่สำคัญ
เป้าหมาย: สร้างแถบนำทางขนาดเล็ก และระบุเส้นทางที่ใช้งานอยู่ให้ชัดเจนสำหรับผู้ใช้และโปรแกรมอ่านหน้าจอ
- การตกแต่งสถานะใช้งาน
- aria-current
- เค้าโครงที่เหมาะกับหน้าจอขนาดเล็ก
ตรรกะสถานะใช้งานและการเข้าถึง
คำนวณสถานะใช้งานของลิงก์โดยเปรียบเทียบเส้นทางปัจจุบัน เพิ่มรูปแบบภาพที่เด่นชัด และกำหนด aria-current="page" ให้กับลิงก์ที่ใช้งานอยู่
สาธิต: แถบนำทางสถานะใช้งาน
เราใช้เราเตอร์แฮชขนาดเล็กและคอมโพเนนต์ Nav ที่ตกแต่งลิงก์ที่ใช้งานอยู่และกำหนด aria-current
<div id="root"></div>
เคล็ดลับด้านการเข้าถึง
เคล็ดลับด้านการเข้าถึง:
- ใช้ลิงก์ <a> จริงสำหรับการนำทาง
- กำหนด aria-current="page" ให้กับลิงก์ที่ใช้งานอยู่
- ทำให้โฟกัสยังมองเห็นได้หลังการนำทาง
ความชัดเจนทางภาพ
ทำให้สถานะใช้งานอยู่เห็นได้ชัดด้วยสีและความต่างระดับสี คงขนาดเป้าหมายการแตะให้ใหญ่ (อย่างน้อย 40px) และเว้นระยะห่างให้เพียงพอสำหรับหน้าจอขนาดเล็ก
ข้อควรระวัง
ควรหลีกเลี่ยง:
- ใช้รูปแบบเมื่อวางเมาส์เพียงอย่างเดียว—ผู้ใช้ระบบสัมผัสจะมองไม่เห็นรูปแบบเหล่านั้น
- ลืมกำหนด aria-current ให้กับลิงก์ที่ใช้งานอยู่
- อาศัย URL เพียงอย่างเดียวโดยไม่อัปเดตส่วนติดต่อผู้ใช้
แนวปฏิบัติที่ดีสำหรับสถานะใช้งาน
สรุป
สรุป: คำนวณลิงก์ที่ใช้งานอยู่จากเส้นทางปัจจุบัน ตกแต่งให้เห็นได้ชัด และกำหนด aria-current="page" เพื่อช่วยโปรแกรมอ่านหน้าจอ
คำถามที่พบบ่อย
บทเรียน “ลิงก์การนำทางและสถานะแอ็กทีฟ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ลิงก์การนำทางและสถานะแอ็กทีฟ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ลิงก์การนำทางและสถานะแอ็กทีฟ”
สร้างการนำทางที่มีสถานะแอ็กทีฟชัดเจนด้วย className และ aria-current ทำให้ลิงก์เข้าถึงได้และเหมาะกับหน้าจอขนาดเล็ก คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “ลิงก์การนำทางและสถานะแอ็กทีฟ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิดการกำหนดเส้นทางฝั่งไคลเอ็นต์
- เส้นทางซ้อนและพารามิเตอร์เส้นทาง
- ลิงก์การนำทางและสถานะแอ็กทีฟ