原生js按钮点击切换效果-示例

1.先获取到当前所有的li标签
2.再循环给每个li绑定点击事件
3.再次循环所有的li标签，可以先清空所有的类名，也可以添加一个默认的类名
4.给当前点击的li添加类名
tips: this的指向就指向当前点击的li

效果图 

 

<div class="top">
	<h3>收入</h3>
	<div class="list">
		<div class="li liactive">本周</div>
		<div class="li">本月</div>
		<div class="li">本年</div>
		<div class="li">自定义</div>
	</div>
</div>

let li = document.querySelectorAll('.tr1 .box2 .list .li');//获取标签元素

for(let i=0; i<li.length;i++){
	li[i].onclick = function () {
		for(let i=0; i<li.length; i++){
			li[i].className = 'li';//添加默认类名
		}
		this.classList.add('liactive');//设置点击效果类名
	}
}

给元素添加class,
document.getElementById(“myDIV”).classList.add(“mystyle”);

给元素添加多个类
document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);

给元素移除某个类
document.getElementById(“myDIV”).classList.remove(“mystyle”);

给元素移除多个类
document.getElementById(“myDIV”).classList.remove(“mystyle”, “anotherClass”, “thirdClass”);

检查是否包含某个类
myDiv.classList.contains(‘myCssClass’); //return true or false