html菜单栏点击后处于选中状态,js实现导航菜单点击切换选中时高亮状态

随着用户点击导航或菜单上不同的页面，出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址，然后在与导航上的链接地址匹对，相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。

bdec8de7175e022bb199ef164fb08c87.png

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'); }

注：需载入jquery.min.js文件