js 选项卡和排它功能

js 选项卡和排它功能

1.值点dom元素的获取

2.给每个li绑定事件

3.自定义属性

4.this的指向

<style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            #box{
            width: 600px;
            height: 500px;
            margin: 0px auto;
            background: #cccccc;
            /* flex-direction: row; */
            position: relative;
            overflow: hidden;
            }
            li{
                width: 200px;
                height: 100px;
                background: blue;
                text-align: center;
                line-height: 100px;
                float: left;/*浮动的元素不占有用位置*/
                position: relative;
                overflow: hidden;
            }
              #box div {
                width: 600px;
                height: 400px;
                text-align: center;
                line-height: 400px;
                /* position: absolute; */
                color: red;
            }
            .active{
                background: #cccccc;
            }
            .dv{
                display: block;
            }
        </style>
<script>
            var li=document.getElementsByTagName('li');
            // var box1=document.getElementsByClassName('box1');
            var box=document.getElementById('box');
            var box1=box.getElementsByTagName('div');
            console.log(box1.length);
            //点按钮的时候都弹出一个事件，来个遍历，给每个按钮绑定事件
            for(var i=0;i<li.length;i++){
                //把span的下标赋值给div,因为div改变属性也是事件调用的，
                li[i].index=i;
                li[i].onclick=function(){
                    //绑定事件，用排他思想，为什么？我们的需求是点击按钮，出现效果，
                                    //点另外一个按钮时候，之前那个按钮恢复过去，即点的时候有样式，不点的时候没有
                                    //所以排他，先干掉所有的样式，包括自己，点击的时候在重新复制
                    console.log('点击出来了'+this.index);
                    for(var j=0;j<li.length;j++){
                        li[j].className='';//排他，清除按钮类名和div的样式
                         box1[j].style.display='none'; //排它功能
                        // li[this.index].className='active';
                    }
                    this.className="active" //所以用this指向事件调用者 
                    box1[this.index].style.display="block";
                    // box1[this.index].style.display='dv';
                } 
            }
        </script>