单击导航条对应li改变其对应栏目样式

feihu588

于 2016-06-20 10:16:02 发布

阅读量243

点赞数

分类专栏： web前端

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<style>
.actived {
background: red;
}

.noactive {
background:;
}
</style>
<ul id="menu">
<li> <a href="#">Menu1</a></li>
<li> <a href="#">Menu2</a></li>
<li> <a href="#">Menu3</a></li>
</ul>
<script>
$('#menu li').click(function () {
var f = this;
$('#menu li').each(function () { this.className = this == f ? 'actived' : 'noactive' });
});
</script>
</body>

</html>

在上面基础上进行更改的内容

$('#menu li a').each(function(){

if(!String(window.location).indexOf($($(this))[0].href))//如果地址栏目包含有当栏目下的内容那么执行下一句操作
$(this).parent().addClass('active').siblings().removeClass('active');
});