現(xiàn)在網(wǎng)站都有判斷導(dǎo)航高亮，這樣為了讓用戶知道自己瀏覽到網(wǎng)站的那個(gè)位置。一般通過JS代碼和CSS代碼都能實(shí)現(xiàn)，華創(chuàng)云科技在這里總結(jié)一種實(shí)用的方法。

比如下面這個(gè)菜單：

<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>

通過對(duì)比當(dāng)前頁面的URL和菜單的URL來判定該高亮顯示哪個(gè)菜單。使用也很簡(jiǎn)單，只需要在頁面的</body>標(biāo)簽前添加下面這段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";

                }

                }

                }

< !--當(dāng)前頁面導(dǎo)航高亮測(cè)試通過--><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>/

這兩種方法都能實(shí)現(xiàn)當(dāng)前導(dǎo)航高亮。