JavaScript之选项卡效果

所谓的选项卡效果就是如下

点击相应的按钮出现相应的效果，这个用JavaScript怎么完成呢，这篇文章我们就来讲解一下
html代码我们是用两个ul列表来完成的

    <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>

css样式我们就不详细说了，这里可以根据个人喜好和需求来设置
JavaScript部分

		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的样式，这里我们就完成了选项卡效果的制作。