【JavaScript】自定义属性的应用案例——Tab栏分页切换

自定义属性

是程序员给元素自定义的属性，主要是为了保存并使用数据，有些数据可以直接保存到页面中而不用保存到数据库中，比如简单的index。
为了不引起歧义，H5规定自定义属性以 “data-” 开头作为属性名并赋值。
Tab栏分页切换是自定义属性应用的一个典型案例，这里给出一个demo。

代码：

<style>
    * {
     
     
        margin: 0;
        padding: 0;
    }

    li {
     
     
        list-style-type: none;
    }

    .box {
     
     
        width: 500px;
        margin: 50px auto;
    }

    .box .nav {
     
     
        height: 30px;
        line-height: 30px;
        background-color: #ccc;
    }

    .nav li {
     
     
        width: 80px;
        text-align: center;
        float: left;
        cursor: pointer;
    }

    .current {
     
     
        background-color: rgb(185, 80, 80);
        color: #fff;
    }

    .content div {
     
     
        display: none;
    }

    .content .item {
     
     
        display: block;
    }
</style>

<body>
    <div class="box">
        <div class="nav">
            <ul>
                <!-- 默认选中第一栏 -->
                <li class="current">Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
            </ul>
        </div>
        <div class="content">
            <!-- 默认选中第一栏，显示第一栏内容 -->
            <div class="item">Tab1内容</div>
            <div>Tab2内容</div>
            <div>Tab3内容</div>
            <div>Tab4内容</div>
        </div>
    </div>
</body>

var navs = document.querySelector(".nav").querySelectorAll('li');
var cons = document.querySelector(".content").querySelectorAll('div');
for (var i = 0; i < navs.length; i++) {
    
    
    navs[i].setAttribute('data-index', i);
    navs[i].onclick = function () {
    
    
        //1.先解决导航栏部分，注意排他性
        //让所有li标签先恢复原状
        for (var i = 0; i < navs.length; i++) {
    
    
            navs[i].className = '';
        }
        //给鼠标点击的li标签添加样式
        this.className = 'current';
        //2.标题和内容对应，同样注意排他性
        //让所有div标签先恢复隐藏
        for (var i = 0; i < cons.length; i++) {
    
    
            cons[i].style.display = 'none';
        }
        //让鼠标点击的li对应的div显示
        //这里通过自定义一个'data-index'属性，而方便让li标签和内容对应上
        var index = this.getAttribute('data-index');
        cons[index].style.display = 'block';
    }
}

实现效果：
在这里插入图片描述

【总结】这个案例的重难点：

排他思想
先清除所有元素的样式，再让当前需要改变样式的元素做改变。
如何让鼠标点击的Tab栏和其内容对应显示
通过设置一个自定义属性，获取当前点击Tab栏（li）的索引值index，每个li对应一个唯一的index。而这个索引值也是我们需要的对应内容元素的索引值（点击第几个li，第几个div就要对应显示。），再让div的第index个元素对应显示就可以实现。

【JavaScript】自定义属性的应用案例——Tab栏分页切换

【总结】 这个案例的重难点：

猜你喜欢

【总结】这个案例的重难点：