＜js＞选项卡

OOA：点击按钮显示对应内容 （通过索引一一对应）

 1. 布局

 2.获取元素 设置默认索引

 3.点击事件

 4.获取上一个索引

 5.隐藏上一个内容

6.获取下一个索引

7.显示下一个内容

（1）HTML部分

 <div class="box">
        <ul>
            <li class="active">热门推荐</li>
            <li>限时抢购</li>
            <li>积分兑换</li>
            <li>满减返现</li>
        </ul>
        <div class="cont">
            <div class="cont1">
                一堆各种复杂的页面结构1
            </div>
            <div class="cont2">
                一堆各种复杂的页面结构2
            </div>
            <div class="cont3">
                一堆各种复杂的页面结构3
            </div>
            <div class="cont4">
                一堆各种复杂的页面结构4
            </div>
        </div>
    </div>

（2）CSS部分

.box {
            width: 400px;
            height: 300px;
            border: solid 1px black;
            margin: 0 auto;
        }
        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: solid 1px black
        }     
        .box li {
            flex: 1;
            border-left: solid 1px black;
            border-right: solid 1px black;
            cursor: pointer;
        }
        /* 点击时的样式 */      
        .box li:active {
            background: #99f
        }
        /* class的样式 */       
        .box li.active {
            background: red
        }   
        .cont div {
            height: 259px;
            display: none;
        }  
        .cont .cont1 {
            background: #66f;
            display: block
        } 
        .cont .cont2 {
            background: #6f6;
        }
        .cont .cont3 {
            background: #f66;
        } 
        .cont .cont4 {
            background: #ff6;
        }

（3）JS部分 

 function Tab() {
        this.li = document.querySelectorAll(".box li");
        this.div = document.querySelectorAll(".cont>div");
        // 默认值 是li的索引，默认第0个选中
        this.Index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function() {
        // 获取正确的this给点击事件
        const that = this;
        // 遍历 给每个li绑定点击事件
        for (let i = 0; i < this.li.length; i++) {
            // 新函数 注意this的指向是事件源 而非Tab,需要获取外部的this
            this.li[i].onclick = function() {
                // 给点击的li绑定序号
                that.li[i].xuhao = i;
                // 点击之后隐藏上一个 获取点击时的索引(同时)
                that.hide();
                // 把被点击的li 传给getIndex形参
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.hide = function() {
        // 点击后隐藏上一个
        // 取消按钮样式 隐藏页面
        this.li[this.Index].className = "";
        this.div[this.Index].style.display = "none";
    }
    Tab.prototype.getIndex = function(now) {
        // 获得点击事件的索引
        // now接收被点击的li  点击的li的序号 赋值给Index
        this.Index = now.xuhao;
        // 索引之后执行？显示
        this.show();
    }
    Tab.prototype.show = function() {
        // 根据点击按钮的索引 显示页面
        this.li[this.Index].className = "active";
        this.div[this.Index].style.display = "block";
    }
  new Tab();

============以下为非面向对象写法==========

思路：

（1）获取导航栏和页面结构 (注意是全部选中)

（2）给导航的按钮(li)手动添加键值对 用于索引

（3）遍历对象，当li点下时执行：(prev上一个 this当前)

        取消上一个按钮的颜色，隐藏上一个页面；

        设置下一个按钮的颜色，显示下一个页面；

        将当前点击的设置为下一个的上一个

（1）HTML部分

   <div class="box">
        <ul>
            <li style="background:red">热门推荐</li>
            <li>限时抢购</li>
            <li>积分兑换</li>
            <li>满减返现</li>
        </ul>
        <div class="cont">
            <div class="cont1">页面结构1</div>
            <div class="cont2"> 页面结构2</div>
            <div class="cont3">页面结构3</div>
            <div class="cont4">页面结构4</div>
        </div>
    </div>

（2）CSS部分

      .box {
            width: 400px;
            height: 300px;
            border: solid 1px black;
            margin: 0 auto;
        }
        
        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: solid 1px black
        }
        
        .box li {
            flex: 1;
            border-left: solid 1px black;
            border-right: solid 1px black;
            cursor: pointer;
        }
        
        .box li:active {
            background: #99f
        }
        
        .cont div {
            height: 259px;
            display: none;
        }
        
        .cont .cont1 {
            background: #66f;
            display: block
        }
        
        .cont .cont2 {
            background: #6f6;
        }
        
        .cont .cont3 {
            background: #f66;
        }
        
        .cont .cont4 {
            background: #ff6;
        }

（3）JS部分 

    var ali = document.querySelectorAll(".box ul li");
    var acont = document.querySelectorAll(".box .cont>div");

    for (var i = 0; i < ali.length; i++) {
        ali[i].a = i;
    }
    // console.log(ali[0].a);//检测是否添加上索引号

    // 要清除的上一个元素的索引
    var prev = 0;

    for (var i = 0; i < ali.length; i++) { //i=0
        ali[i].onclick = function() { // ali[0].onclick
            // 取消上一个按钮的样式
            ali[prev].style.background = "none";
            // 隐藏上一个页面内容
            acont[prev].style.display = "none";
            // 显示当前按钮样式 this就是当前点击的li
            this.style.background = "red";
            // 显示当前页面
            acont[this.a].style.display = "block";
            // 将当前点击的，设置为下一个的上一个
            prev = this.a;
        }
    }