Artikel ini menjelaskan metode JavaScript untuk mengimplementasikan aktivasi navigasi halaman saat ini. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
bagian html (navigasi yang direferensikan, tidak tersedia # bukan tautan, tes dapat membuat beberapa halaman statis baru)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/kategori/html-css/"> html/css </a> </li> <a href = "/kategori/javascript/JAVASCRIPTS/"> JAVASCRIPT/"> JAVASCRIPT/"> href = "/kategori/seo/"> seo </a> </li> <li> <a href = "/kategori/front-end/"> berita front-end </a> </li> </ul>
bagian javascript (tentukan navigasi halaman saat ini dengan kelas .on ditambahkan)
$ (function () {var a1 = document.url; var a2 = $ ("#nav a"); for (var i = 0; i <a2.length; i ++) {if (a1.indexof ($ (a2 [i]). attr ("href"))! = -1) {$ (A2 [i]). Parent (). AddClass ("on"); return;}} $ (a2 [0]). Parent (). AddClass ("on");})Bagian CSS (penyesuaian yang relevan dapat dilakukan sesuai dengan kebutuhan Anda)
#nav li {display: inline-block; float: left; text-align: center; tinggi: 36px; padding-left: 4px; line-height: 36px; latar belakang: url (gambar/nav.gif) no-repeat kanan bawah;}#nav li a {display: block; color; color:#777; Padding: 0 15px 0px 0 Li.on {font-weight: bold; latar belakang: url (gambar/nav.gif) no-repeat 0 0; margin-left: -3px;}#nav li.on a {latar belakang: url (gambar/nav.gif) no-repeat right 0;}Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.