js两种思想实现table栏（选项卡）切换

table栏切换暂时了解到两个思想

• 排他思想
  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式 （留下我自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
• 清空上一个被选项的className
  利用自定义属性把上一个被选项的索引号存放起来，然后每切换一个，利用存放起来的索引号清空上一个的className。
  代码演示如下：

-------------html和css代码--------------------
<style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        .box1 {
            width: 700px;
            height: 525px;
            border: 1px solid #333;
            position: relative;
            margin: 20px auto;
            text-align: center;
        }
        
        .box1 p {
            width: 100%;
            height: 30px;
            background: rgba(75, 86, 85, 0.5);
            color: white;
            font: 24px/30px "微软雅黑";
            position: absolute;
        }
        
        #title2 {
            bottom: 0;
        }
        
        .box1 button {
            width: 40px;
            height: 60px;
            background: rgba(75, 86, 85, 0.5);
            position: absolute;
            top: 50%;
        }
        
        #right {
            right: 0;
        }
        
        #list {
            position: absolute;
            bottom: 40px;
            left: 50%;
            margin-left: -50px;
        }
        
        #list li {
            width: 20px;
            height: 20px;
            background: gray;
            border-radius: 50%;
            float: left;
            margin-right: 5px;
        }
        
        #list .active {
            background: orange;
        }
    </style>

 <div class="box1">
        <p id="title1">1/4</p>
        <p id="title2">美女1</p>
        <button id="left">&lt;</button>
        <button id="right">&gt;</button>
        <img src="img/1.jpg" alt="" id="im">
        <ul id="list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

 <script>
        var pic = document.querySelector("#im");
        var title1 = document.querySelector("#title1");
        var title2 = document.querySelector("#title2");
        var lists = document.querySelector("#list").querySelectorAll("li");
        //利用第二种思想
		//index保存当前显示图片的索引
        var index = 0;
        	//为li循环添加点击事件
        for (var i = 0; i < lists.length; i++) {
        	//为每一个li新增属性_index 用来保存自身的索引
            lists[i]._index = i;
            lists[i].onclick = function() {
            	//1.把上一个li的className干掉
                lists[index].className = '';
                
                //2.修改内容区
                this.className = 'active';
                
                //3.修改当前展示的选项卡的索引
                index = this._index;

                pic.src = 'img/' + (index + 1) + '.jpg';
                title1.innerHTML = (index + 1) + '/4';
                title2.innerHTML = '美女' + (index + 1);
            }
        }
        document.querySelector('#right').onclick = function() {
            move();
            moveLi();
        }
        document.querySelector('#left').onclick = function() {
            index -= 2;
            move();
            moveLi();
        }

        function move() {
            index++;
            if (index == 4) {
                index = 0;
            }
            if (index == -1) {
                index = 3;
            }
            pic.src = 'img/' + (index + 1) + '.jpg';
            title1.innerHTML = (index + 1) + '/4';
            title2.innerHTML = '美女' + (index + 1);
        }
        //更改li的状态
        function moveLi() {
        //利用排他思想	
       	 	//1.先干掉所有li的className
        	//2.再给选中的li添加className 
            for (var i = 0; i < lists.length; i++) {
                lists[i].className = '';
            }
            lists[index].className = 'active';
        }
    </script>