首页 > 技术文章 > jquery 当前页导航高亮显示

majin 2014-05-27 17:17 原文

<script type="text/javascript">

$(document).ready(function(){
 var myNav = $("#nav a"),i;
            
  for(i=0;i<myNav.length;i++){
        
    var links =myNav.eq(i).attr("href"),myURL =document.URL;
    
     if(myURL.indexOf(links) != -1) {
        
       myNav.eq(i).parent().addClass("current");
        
     }
  }
});
</script>

js代码

html部分

<div  id="nav" >
            <ul >
                <li ><a href=" ">主页</a></li>
                <li><a href=" ">今日热点</a></li>
                <li><a href=" ">当地新闻</a></li>
</ul>        
        </div>    

css部分

#nav ul li.current {
    background: transparent url(../images/left-tab.gif) no-repeat;    
}
#nav ul li.current a {    
    color: #444;
    background: transparent url(../images/right-tab.gif) no-repeat right top;    
}

其实本身不是很难,主要对jQuery对象方法和属性有深入了解。留意jQuery对象小括号

推荐阅读