随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
实现代码:
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cur{ background:#D96C00; font-weight:bold;}
</style>
<ul class="menu" id="menu">
<li><a href="demo.html">首页</a></li>
<li><a href="te1.html">PHP综合</a></li>
<li><a href="te2.html">Ecshop</a></li>
</ul>
<script type="text/javascript">
var urlstr = location.href;
//alert((urlstr + '/').indexOf($(this).attr('href')));
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
演示1(静态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo.html
演示2(动态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo1.html?aa=1