<div> <ul class="list1"> <li class="active">效果1</li> <li>效果2</li> <li>效果3</li> </ul> <ul class="list2"> <li class="active">样式1</li> <li>样式2</li> <li>样式3</li> </ul> </div> var oList1=document.querySelectorAll('.list1 li'); var oList2=document.querySelectorAll('.list2 li'); // 循环 ul中的所有li,添加点击事件 oList1.forEach(function(oLi1,key){
// ul中的li标签 , OLi1就是ul中的li标签 oLi1.onclick=function(){
// 1,清除所有的ul中li的class样式属性 // 循环遍历所有的ul中的标签 oList2.forEach(function(oLi2,k){
// list1和list2索引是相同的 // 通过list2中li的索引也可以获取list1中的li标签 // olist1[k] 就是 list1中的li标签 oLi2.className=''; oList1[k].className=''; }) // 循环结束,所有的ul中,li都没有active // 给当前点击的oLi1标签,也就是ul,li标签,添加样式 oLi1.className='active'; // 给list2中,对应的这个标签的索引的li标签,添加样式 oList2[key].className='active'; } }) 首先我们获取标签，用document.querySelectorAll(‘标签’)获取的是数组，这里我们获取的是两个ul的li的数组，循环遍历第一个按钮列表的数组，给每一个按钮加上一个点击事件，这里遍历得到列表1数组里面的每一个li以及它的索引值，然后在点击事件里面循环列表2，目的是清除两个列表的列表项的class属性值，这里我们要注意的是：效果1按钮对应样式1，，效果2按钮对应样式2，即他们索引值是相同的，所以这里list1和list2可以互相用索引值。然后结束list2的遍历，回到list1的遍历，这里我们就要给当前点击的li和对应的样式加上我们提前写好的class属性值为active的样式，这里我们就完成了选项卡效果的制作。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/202799.html原文链接：https://javaforall.net
