简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

.active动态使用实现导航效果

php中世界最好的语言
Lepaskan： 2018-04-19 15:49:42
asal
1923 orang telah melayarinya

这次给大家带来.active动态使用实现导航效果，.active动态使用实现导航效果的注意事项有哪些，下面就是实战案例，一起来看一下。

通过jq获取你打开页面的链接 window.location.pathname；

在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同

通过jq包含方法找到相对应的li给他加入active类名 

然后。。就没有然后了。。。

jq代码：

$(function() {
 varli = $(".title_ul").children("li");
 for(vari = 0; i < li.length; i++) {
 varurl = window.location.pathname;
 varurl = url.replace("/","");
 if(url.indexOf(li[i].id)!=-1) {
  li[i].firstChild.className ="active";
 
 }else{
  li[i].firstChild.className ="";
 }
 }
})
Salin selepas log masuk

html代码：

<body>
<p class="title">
 <ul class="title_ul">
 <li id="index"><a href="index.html"rel="external nofollow"class="">页面1</a></li>
 <li id="zf"><a href="zf.html"rel="external nofollow"class="">页面2</a></li>
 <li id="gc"><a href="gc.html"rel="external nofollow"class="">页面3</a></li>
 <li id="hc"><a href="hc.html"rel="external nofollow"class="">页面4</a></li>
 <li id="shwt"><a href="shwt.html"rel="external nofollow"class="">页面5</a></li>
 </ul>
</p>
</body>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery做出鼠标滚轮操作图片缩放大小

jQuery实现回到顶部功能

Atas ialah kandungan terperinci .active动态使用实现导航效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
实现 导航
sumber：php.cn
Artikel sebelumnya：EasyUI结合zTree树形结构制作网页 Artikel seterusnya：base64实现加密解密功能
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
API Komposisi Vue 3: Render Props dan v-if walaupun nilainya Salah Saya menghadapi masalah di sini yang saya rasa saya tidak begitu faham. Saya menyertakan k...
daripada 2023-11-05 14:48:16
0
2
280
Menggulung objek PHP menggunakan kekunci dinamik: panduan langkah demi langkah Saya cuba menghuraikan fail JSON menggunakan PHP. Tapi sekarang saya buntu. Ini ialah kand...
daripada 2023-10-10 08:50:47
0
2
264
Bagaimana untuk menetapkan nilai harta untuk keadaan aktif elemen lain dalam CSS? Saya sedang membangunkan suis bebas JavaScript. Satu masalah yang saya hadapi ialah saya t...
daripada 2023-09-14 18:54:27
0
1
330
Tambahkan kelas yang berbeza pada elemen yang dicipta secara dinamik Saya mempunyai pelbagai objek di mana setiap objek mempunyai textValue, aktif, maklumat dl...
daripada 2023-09-11 13:34:46
0
1
246
Bagaimanakah cara saya menghentikan kotak input dalam grid saya daripada meregang pada skrin? UI Semasa: UI yang Diingini: Bagaimanakah saya boleh membuat elemen input di bahagian kana...
daripada 2023-09-07 12:43:00
0
1
253
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！