您的位置：首页 > Web前端 > CSS

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

2016-06-20 10:16 489 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航