网站头部判断当前页面导航高亮

现在网站都有判断导航高亮，这样为了让用户知道自己浏览到网站的那个位置。一般通过JS代码和CSS代码都能实现，华创云科技在这里总结一种实用的方法。

比如下面这个菜单：

<ul id=”nav”>
<li><a href=”index.html”>主页</a></li>
<li><a href=”column.html”>栏目</a></li>
<li><a href=”column2.html”>栏目二</a></li>
</ul>

通过对比当前页面的URL和菜单的URL来判定该高亮显示哪个菜单。使用也很简单，只需要在页面的</body>标签前添加下面这段JS即可：

window.onload=function (){

                var nav = document.getElementById("nav");

                var links = nav.getElementsByTagName("li");

                var lilen = nav.getElementsByTagName("a");

                var currenturl = document.location.href;

                var last = 0;

                for (var i=0;i<links.length;i++)

                {

                var linkurl = lilen[i].getAttribute("href");

                if(currenturl.indexOf(linkurl)!=-1)

                {

                last = i;

                links[last].className = "high";

                }

                }

                }

< !--当前页面导航高亮测试通过--><script type = "text/javascript" > $(function() {

    var myNav = $(".ztfl_bg ul li a");

    for (var i = 0; i < myNav.length; i++) {

        var links = myNav.eq(i).attr("href");

        var myURL = document.URL;

        var durl = /http:\/\/([^\/]+)\//i;

        domain = myURL.match(durl);

        var result = myURL.replace("http://" + domain[1], "");

        if (links == result) {

            myNav.eq(i).addClass("high");

            myNav.eq(i).parents(".ztfl_bg a").addClass("high");

        }

    }

}); < /script>/

这两种方法都能实现当前导航高亮。