html部分

1、在body中建立这些其中current这个class名很重要；选项卡的关键

<body>
    <div class="box">
        <ul class="tab_box">
            <li class="current">css</li>
            <li>html</li>
            <li>js</li>
        </ul>
        <div class="body_box">
            <div class="current">css很好</div>
            <div>html很好</div>
            <div>js很好</div>
        </div>
    </div>
</body>

css部分

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            border: 1px dashed darkseagreen;
            margin: auto
        }

        ul {
            width: 100%;
            height: 50px;
            display: flex;
            /* 弹性盒子模型 */
        }

        ul li {
            flex: 1;
            text-align: center;
            line-height: 50px;
            color: #333;
            font-size: 25px
        }

        ul li:hover {
            background-color: salmon
        }

        ul li.current {
            /* ul下的li 有current类名的li */
            background: salmon
        }

        .body_box {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .body_box div {
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            background: rgba(199, 92, 181, 0.5);
            display: none
        }

        .body_box div.current {
            /* body_box 下的带有current类名的div才有当前的样式 */
            display: block
        }
    </style>

js部分

<script>
    /* 
       有current 类名的li 会有被选中的样式
       有current 类名的div 会被显示出来
       //实现点击上边的li对应显示下边的div

     */
    var tabs = document.getElementsByTagName('li'),
        bodys = document.querySelectorAll('.body_box div')
        
    //点击tab 切换
    for (var i = 0; i < tabs.length; i++) {
        //tabs[i]每一个tabs
        tabs[i].myIndex = i;
        tabs[i].onclick = function () {
           
            //点击哪个元素 就有背景色
            //也就是给点击的元素加上current类名即可
            //现在的缺陷是点击当前元素可以加上类名但是其他的标签没有被移除
            //解决方式是添加之前先都全部移除current类名然后再给对应元素添加

            /* this.className='current'; */
            for (var j = 0; j < tabs.length; j++) {
                tabs[j].className = ''   //清楚所有li的类名
                bodys[j].className = ''  //清楚所有body div 的类名
            }
            this.className = 'current'
            //点击第几个li 就让第几个div显示
            //怎么知道你点击的是第几个li
            //通过this.myIndex 可以知道当前点击元素的索引
            //bodys[this.myIndex]是当前要显示的div

            bodys[this.myIndex].className = 'current'
            //this.myIndex 当前点击元素的索引
        }
    }

</script>

关键点

1、主要的思想在于当我们点击那个li时那个li的背景颜色就要变化

2、在他变化的同时且下边的div 的 display 属性也需要变化而我们开头说的current这个class名就是关键，当我们点击某个li的时候我们就令其他的li div的class名清空

for (var j = 0; j < tabs.length; j++) {
                tabs[j].className = ''   
                bodys[j].className = ''  
            }

在清空后我们再给我们当前点击的这个li 以及他对应的div赋上current这个class名

 this.className = 'current'
bodys[this.myIndex].className = 'current'

这样我们就实现了选项卡

选项卡的制作

html部分

css部分

js部分

关键点