用Jquery来实现这种效果,原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。
此方法支持动态链接和静态链接多种形式。
<div id="navbar" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li class=""><a href="/">首页</a></li>
<li class="dropdown">
<a href="链接地址" class="dropdown-toggle" data-toggle="dropdown" role="button">技术 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="链接地址">JAVA</a></li>
</ul>
</li>
<li><a href="链接地址">PHP</a></li>
<li><a href="链接地址">Python</a></li>
</ul>
</div>
<script type="text/javascript">
var urlstr = location.href;
var urlstatus=false;
$("#navbar .nav > li > a").each(function () {
if (urlstr.indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
$(this).parent().addClass('active').siblings().removeClass('active');
urlstatus = true;
}
});
$("#navbar .nav > li > ul > li > a").each(function () {
if (urlstr.indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
$(this).parent().parent().parent().addClass('active').siblings().removeClass('active');
urlstatus = true;
}
});
</script>
网友评论