tab栏的切换【html+css+js】

前言【来实现一个tab栏切换】

首先实现tab栏切换，是点击不同的按钮，显示不同的内容。用html+css的方式需要运用js来实现，获取它的DOM来实现一个切换。

HTML部分

<div class="tab">
        <div class="tab-head">
            <ul>
                <li class="current">
                    <a href="#">首页</a>
                </li>

                <li>
                    <a href="#">电视剧</a>
                </li>

                <li class="current">
                    <a href="#">动画片</a>
                </li>

                <li class="current">
                    <a href="#">综艺</a>
                </li>

            </ul>

        </div>

        <div class="tab-content">
            <div class="items"> 我是首页</div>
            <div> 我是电视剧模块</div>
            <div> 我是动画片模块</div>
            <div> 我是综艺模块</div>
        </div>
 </div>

css部分

<style>
        * {
            /* 初始化 */

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {
            /* 视口高度 */

            height: 100vh;

            /* flex布局 */

            display: flex;

            justify-content: center;

            align-items: center;

        }

        ul {
            /* 去除小圆点 */

            list-style: none;

        }

        .tab {
            width: 600px;

            height: 400px;

            border: 2px solid #ccc;

        }

        .tab-head ul {
            display: flex;
        }

        .tab-head ul li {
            display: flex;

            align-items: center;

            justify-content: center;

            height: 40px;

            /* 各占一份 */

            flex: 1;

        }

        .tab-head ul li a {
            text-decoration: none;

            color: black
        }

        .current {
            color: #fff;

            background-color: pink;

        }

        .current a {
            color: #fff !important;
        }



        .tab-content div {
            /* 其余隐藏 */

            display: none;

        }

        .tab-content .items {
            /* 第一个显示 */

            display: block;

        }
    </style>

JS部分

<script>
    // 获得所有的li
    var lis = document.querySelectorAll('li');
    // 获得.tab-content
    var tab_content = document.querySelector('.tab-content');
    // 获得.tab-content的子元素节点
    var item = tab_content.children;

    // 给所有的li绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        // 给所有li添加索引号
        lis[i].setAttribute('index', i);
        lis[i].addEventListener('click', function () {
            for (var i = 0; i < lis.length; i++) {
                // 移除所有li的类名
                lis[i].className = '';
                // 移除所有.tab-content的子元素节点的类名
                item[i].className = '';
            }
            // 被点击的li添加current类名
            this.className = 'current';
            // 获得被点击li的索引号
            var index = this.getAttribute('index');
            item[index].className = 'items';
        })
    }

</script>

效果展示

tab栏切换