近日,在项目中,有三个大的导航菜单,分别链接着各自页面,静态页面很简单,只需要在三个页面 对应的li上加选中样式,不贴代码。
那么这有什么问题可值得一说?问题在后台使用jsp,把上面说的三大导航菜单做成了公共模板,那么这样一来,问题似乎不是那么简单了。
不谈其他,就用js来做,实现思路如下:
第一步:获取url,然后根据导航菜单li>a的href,进行判断;
第二步:根据条件进行样式更改,实现选中效果
<ul class='nav'>
<li><a href='index.html'>首页</a></li>
<li><a href='news'>新闻</a></li>
<li><a href='pic.hmtl'>图片</a></li>
</ul>
var urlstr = location.href;
console.log(urlstr);
$(".nav li").each(function () {
if ((urlstr + '/').indexOf($(this).children('a').attr('href')) > -1&&$(this).children('a').attr('href')!='') {
$(this).addClass('active'); urlstatus = true;
} else {
$(this).removeClass('active');
}
});