排他思想==＞选项卡

最新推荐文章于 2024-10-09 14:44:12 发布

晨曦喜欢开发

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量82

点赞数

分类专栏：案例文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_59507440/article/details/121802850

版权

案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        .tab {
            width: 450px;
            height: 300px;
            margin: auto;
            background: skyblue;
        }

        .tab_head {
            width: 100%;
            height: 50px;
            font-size: 20px;
            background-color: springgreen;
        }

        .tab_head li {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }

        .tab_con li {
            display: none;
            line-height: 150px;
            text-align: center;
        }

        .tab .tab_head .current {
            color: white;
            background-color: tomato;
        }

        .on {
            display: block !important;
        }
    </style>
</head>

<body>
    <div class="tab">
        <!-- 导航 -->
        <ul class="tab_head">
            <!-- <li data-index="0" class="current">我的</li>
            <li data-index="1">企业</li>
            <li data-index="2">客户</li> -->
            <li class="current">我的</li>
            <li>企业</li>
            <li>客户</li>
        </ul>
        <!-- 内容区 -->
        <ol class="tab_con">
            <li class="on">我的内容</li>
            <li>企业内容</li>
            <li>客户内容</li>
        </ol>
    </div>
    <script>
        //1、注册声明事件
        var lis = document.querySelectorAll('ul li')
        var ols = document.querySelectorAll('ol li')
        //循环绑定所有tab选项卡事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i)
            // 2、绑定事件   3、处理函数
            lis[i].onclick = function () {
                clearSty() // 1.2清除所有样式
                this.className = 'current' //1.3 添加新的样式

                // 内容区
                // 1.1 自定义一个属性和属性值==>获取下标
                var index = this.getAttribute('data-index')
                ols[index].className = 'on' //1.2 添加新的样式
            }
        }

        // 清除li所有样式
        function clearSty() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
                ols[i].className = ''
            }
        }
    </script>
</body>

</html>