js控制公共模板中，不同页面中的导航选中效果-判断当前的url
生活随笔
收集整理的這篇文章主要介紹了
js控制公共模板中，不同页面中的导航选中效果-判断当前的url
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
用js的做法也很多。比較推薦的方法是判斷當(dāng)前的url，然后根據(jù)url在nav中的位置，來對(duì)nav中的某個(gè)導(dǎo)航增加選中樣式，代碼如下：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body> <style> .active {color: red; } </style> <ul id="tab2"><li><a href="index.html">首頁</a></li><li><a href="news.html">新聞</a></li><li><a href="about.html">關(guān)于</a></li><li><a href="job.html">工作</a></li><li><a href="ad.html">廣告</a></li><li><a href="contactus.html">聯(lián)系我們</a></li> </ul> <script> //這里的js, 可以做為一個(gè)外部的JS文件, 然后由上面這些頁面統(tǒng)一引入即可. (function(){var tDiv = document.getElementById("tab2"),links = tDiv.getElementsByTagName("a"),index = 0,//默認(rèn)第一個(gè)菜單項(xiàng) url = location.href.split('?')[0].split('/').pop();//取當(dāng)前URL最后一個(gè) / 后面的文件名，pop方法是刪除最后一個(gè)元素并返回最后一個(gè)元素if(url){//如果有取到, 則進(jìn)行匹配, 否則默認(rèn)為首頁(即index的值所指向的那個(gè))for (var i=links.length; i--;) {//遍歷 menu 的中連接地址if(links[i].href.indexOf(url) !== -1){index = i;break;}}}links[index].className = 'active'; })(); </script></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/lidongfeng/p/5179739.html
總結(jié)
以上是生活随笔為你收集整理的js控制公共模板中，不同页面中的导航选中效果-判断当前的url的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#与时间有关的一些方法
- 下一篇： 新年图书整理和相关的产品