span {
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #ddd;
background-color: #eee;
display: inline-block;
}
.active {
border: 1px solid red;
color: red
}
爱好:
<span>吃饭</span>
<span>睡觉</span>
<span>打豆豆</span>
<script>
var btns = document.querySelectorAll('span');
console.log(btns);
// 绑定点击事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
if (this.getAttribute('class') == 'active') {
this.setAttribute('class', '')
} else {
this.setAttribute('class', 'active')
}
}
}
</script>
js实现多选
最新推荐文章于 2024-04-02 19:39:43 发布