当前导航条增加class样式以做区分

研究过Jquery遍历方法后发现在之前绞尽脑汁想不出来的问题一下子豁然开朗了。

就在一个导航条navbar让当前页面的导航做样式区分。

CSS:

.navbar a.current {
background: #333; 
color:#fff; !important

}
.navbar a.current sup {
color:#fff;
visibility:visible;
}

HTML

<div class="navbar">
<ul>
 <li class="icon-list"><a href="/" class="default far fa-home"><sup>首页</sup></a>
 </li><li class="icon-list"><a href="/cpnpos.aspx" class="">CPN Detail<sup class="">料号详情</sup></a></li>
   </ul>
 </li>
</ul>
</div>

JS

$(function(){
    for(var i = 0; i < $("a").length; i++){
		
	$("a").each(function(i){
                  if(location.pathname == $("a")[i].pathname) {
					  $(this).addClass("current");
				  };		  
	});	
		
	}

})