tab栏切换制作

先上图

要求1：默认状态，第一个选项卡被选中，展示第一个选项卡的内容

策略：第一个选项卡默认有被选中的样式，第一个选项卡对应的display: block，其他的dispaly设为none

要求2: 选项卡模块：被点击的变为红底白字，其他的变为白底红字

策略：排他思想，每次点击一个选项卡时，先把其他选项卡设为默认样式，然后自己设为被选中的样式。这里我们先在style里面设置一个新的class,把这个样式给被选中的选项卡。

要求3：每点击某个选中卡，出现对应的模块内容，点击第一个li，展示第一个div,点击第几个li，展示第几个div......，如何知道选中了第几个li呢?

策略：利用for循环，给每个li设置一个自定义属性，每点击这个li，得到该liindex的属性的值

代码部分：

<body>
    <div class="con">
        <div class="tab_list">
            <ul>
                <!-- 第一个默认被选中 -->
                <li class="tabChange">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
            </ul>
        </div>
        <div class="tab_containt">
            <div style="display: block">商品介绍模块</div>
            <div>规格与包装模块</div>
            <div>售后保障模块</div>
            <div>商品评价模块</div>
        </div>
    </div>

样式：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .con {
            width: 70%;
            margin: 50px auto;
        }
        
        .tab_list {
            border-bottom: 1px solid red;
            height: 60px;
        }
        
        .tab_list ul {}
        
        .tab_list ul li {
            list-style: none;
            margin-right: 10px;
            width: 23%;
            height: 60px;
            line-height: 60px;
            color: red;
            float: left;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_containt div {
            display: none;
        }
        
        .tab_list ul .tabChange {
            color: aliceblue;
            background-color: red;
        }

js部分：

<script>
        // 切换选项卡时选项卡模块：被点击的变为红底白字，其他的变为白底红字,所以要用到排他思想
        var lis = document.querySelector(".tab_list").querySelectorAll("li");
        var items = document.querySelector(".tab_containt").querySelectorAll("div");
        //console.log(items);

        //console.log(lis);
        //给所有的li注册点击事件
        for (var i = 0; i < lis.length; i++) {
            // 点击第一个li，展示第一个div,点击第几个li，展示第几个div......this
            // 那么我们如何知道点击了第几个li呢？思路：给li设置一个自定义属性，那么如何给5个li都设置带有编号的index呢，当然用for循环啦
            lis[i].setAttribute("index", i);
            lis[i].onclick = function() {
                //console.log("dianij");
                //排他
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = "";
                }
                //成就自己
                this.className = "tabChange";
                //得到选项卡的index属性值
                var index = this.getAttribute("index");
                //console.log(index);

                //先排他思想，清除其他的内容显示第index个div的内容
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = "none";
                }
                //使第index个盒子的内容显示
                items[index].style.display = "block";

            }
        }
    </script>

链接: https://fly63.com/article/detial/4906

tab栏切换制作

代码部分：

Echart4 多个tab页切换不显示

Tab切换以及缓存页面处理的几种方式

实现同一页面多tab时的状态同步

React实现类似淘宝tab居中切换效果