บทความนี้อธิบายวิธีการของ JavaScript เพื่อใช้การเปิดใช้งานการนำทางหน้าปัจจุบัน แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
ส่วน HTML (การนำทางอ้างอิงไม่พร้อมใช้งาน # แทนลิงก์การทดสอบสามารถสร้างหน้าคงที่ใหม่ได้หลายหน้า)
<ul id = "nav"> <li> <a href = "/"> บ้าน </a> </li> <li> <a href = "/หมวดหมู่/html-css/"> html/css </a> </li> <li> href = "/category/seo/"> seo </a> </li> <li> <a href = "/หมวดหมู่/front-end/"> ข่าว front-end </a> </li></ul>
JavaScript Part (ระบุการนำทางของหน้าปัจจุบันด้วยการเพิ่มคลาส. บน.)
$ (function () {var a1 = document.url; var a2 = $ ("#nav a"); สำหรับ (var i = 0; i <a2.length; i ++) {ถ้า (a1.indexof ($ (a2 [i]) {$ (a2 [i]). parent (). addclass ("on"); return;}} $ (a2 [0]). parent (). addclass ("on");})ส่วน CSS (การปรับที่เกี่ยวข้องสามารถทำได้ตามความต้องการของคุณ)
#nav li {display: inline-block; float: left; text-allign: center; ความสูง: 36px; padding-left: 4px; leight line-height: 36px; พื้นหลัง: url (images/nav.gif) ไม่มีการทำซ้ำด้านล่าง; li.on {font-weight: bold; พื้นหลัง: url (images/nav.gif) ไม่ต้องทำซ้ำ 0 0; margin-left: -3px;}#nav li.on a {พื้นหลัง: url (images/nav.gif) No-Repeat Right 0;}ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน