选项卡效果思路

• 1
• 2
• 3

1111111

222222222

3333333333

<script>
    //思路：首先找到所以li
    var lis=document.getElementsByTagName("li"),
    head=document.getElementsByTagName("div")[0], /*找页面中的第一个div，为了找到我们需要的三个div，如果直接找那三个div
                                                    会把第一个div也找进去，导致定位不准确，所以这里我们迂回一下
                                                */
    div=head.getElementsByTagName("div"); //找我们需要的三个div
    //找的三个div是一个类集合，所以需要遍历
    for(var i=0;i<lis.length;i++){
        //给每一个div加上点击事件
        lis[i].onclick=function(){
            /*为了达成点击一个li背景变色，其余li背景相同的效果，我们在点击时要把其余的li的class属性清空*/
            for(var i=0;i<lis.length;i++){
                lis[i].className="";
                div[i].className="";
            }
            //在点击事件中再次循环的原因：
            /*因为页面一开始就会先做最上面的循环，也就意味着开始点击事件时上面的循环已经做完了，
              所以此时i=5,所以如果不重新做循环，那么此时lis[i]中的i就是5，没有我们需要的值，无意义
            */
           //给我们点击的那个li赋值class
            this.className="active";
            /*为了实现点击li，出现相应div块的效果，这里我们自定义了一个dy属性(也可以使用id并且更方便，
            但id一般是给予后端使用的，所以这里我们使用自定义属性)，给每一个li的dy写上相应数字，
            这样就可以把dy赋值给div的下标，从而获取相应的div*/
            var i=this.getAttribute("dy");
            div[i].className="active";
        }
    }
</script>