背景
想做一个给按钮按下去增加一个class替换背景颜色,如下的效果,在JQuery里面,可以直接用 addClass 和 removeClass 直接操作。原生 js 有啥方便的办法吗
方法
用 .classList.add('类名')
和 .classList.remove('类名')
实现,一个添加,一个移除,安逸
具体如下
<div class="list-group" id="listGroup1" role="tablist">
<p class="list-group-item" data-index="1">研究方向 </p>
<p class="list-group-item" data-index="2">研究项目</p>
<p class="list-group-item" data-index="3">科研成果</p>
</div>
var buttons = document.querySelector('#listGroup1').querySelectorAll('p'); //侧边栏按钮
for (var i = 0; i < buttons.length; ++i) {
buttons[i].onclick = function () {
var index = this.getAttribute('data-index');
if (index == '1') {
buttons[0].classList.add('active');
buttons[1].classList.remove('active');
buttons[2].classList.remove('active');
}
else if (index == '2') {
buttons[0].classList.remove('active');
buttons[1].classList.add('active');
buttons[2].classList.remove('active');
}
else if (index == '3') {
buttons[0].classList.remove('active');
buttons[1].classList.remove('active');
buttons[2].classList.add('active');
}
}
}