导航高亮

HTML 代码

<ul id="main-nav">

   <li><a href="index.html">首页</a></li>

   <li><a href="about.html">关于我们</a></li>

   <li><a href="news.html">新闻资讯</a></li>

</ul>

JQUERY 代码

导航高亮 JQ（一）

 

<script type="text/javascript">

          var myNav=document.getElementById("main-nav").getElementsByTagName("a");

        var currenturl = document.location.href;

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

            var aurl=myNav[i].getAttribute("href");   //getAttribute("href"); 获得 href 的属性

            if(currenturl.indexOf(aurl)!=-1){    // 查找子字符串开始的位置，如果找不到 显示 -1

                myNav[i].className="active";

                myNav[0].className="";

            }

        }

    </script>

 

 

导航高亮（二）

 

$("#main-nav a").each(function(){

if ($(this)[0].href == String(window.location) && $(this).attr('href')!="") {

$(this).addClass("active"); }

});