用js给导航栏动态添加active属性
我要达到的效果是这样的，点击社会招聘其余两个是没有active属性的这一个会加上active属性但是我这个网页是利用js跟后台数据进行绑定，这个是我绑定后的代码，循环输出...
我要达到的效果是这样的，点击 社会招聘 其余两个是没有active属性的 这一个会加上active属性
但是我这个网页是利用js跟后台数据进行绑定，这个是我绑定后的代码，循环输出了这三条数据，也就是这三个按钮
我在url里面设置了一class参数，比如我点击的是社会招聘，那么class就会等于社会招聘，
我现在想要的效果就是用js获取class的参数 然后给这个按钮加上active就可以了。
用上面这两个方法都只能给所有的按钮都加上active，用获取url里面class的好处就是页面刷新属于这个class的还是有active属性，现在关键是要js怎么获取到这个class 并且给他加上active。
下面是我后台绑定的数据组 展开
但是我这个网页是利用js跟后台数据进行绑定，这个是我绑定后的代码，循环输出了这三条数据，也就是这三个按钮
我在url里面设置了一class参数，比如我点击的是社会招聘，那么class就会等于社会招聘，
我现在想要的效果就是用js获取class的参数 然后给这个按钮加上active就可以了。
用上面这两个方法都只能给所有的按钮都加上active，用获取url里面class的好处就是页面刷新属于这个class的还是有active属性，现在关键是要js怎么获取到这个class 并且给他加上active。
下面是我后台绑定的数据组 展开
1个回答
展开全部
给你一个简单的原生html5实现的例子吧。没有使用jquery。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
display: inline-block;
width: 100%;
height: 30px;
line-height: 30px;
}
li:active, li:focus, .li-active {
background: #dddddd;
color: red;
}
</style>
<script type="text/javascript">
onload = function () {
function removeActiveClass(node) {
node.className = '';
}
document.querySelector('ul[id=test]').onclick = function (e) {
Array.prototype.forEach.call(document.querySelectorAll('ul[id=test] > li'), removeActiveClass);
var target = e.target;
target.className = 'li-active';
}
}
</script>
</head>
<body>
<ul id="test">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
