
这是因为点击button后,外层的a标签也会被触发,然后页面就刷新了,css效果也肯定就“一夜回到解放前”了。
js代码可改为:
$(function(){$('#button button').click(function(){
$('#button button').removeClass("active")
$(this).addClass('active')
return false //加这行!
})
})
给你一个简单的原生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>
很简单。
if(location.href=='1.html'){$('.hexagon-in2').addClass('.active')
}
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)