Js 笔记 tab栏切换，以及获取属性办法 自定义属性

    ul,
    li {
        list-style: none;
    }

    .tab {
        width: 1240px;
        margin: 0 auto;
        width: 800px;
        height: 300px;
        /* background-color: #999; */
    }       


    .tab_list ul{ 
        height: 40px;
        background-color: #999999;
        padding: 0 ;
        /* background-color: pink; */
        display: flex;
        align-items: center;
    }

    .tab_list li{
        width: 40px;
        height: 40px;
        flex: 1;
        padding: 0 20px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        
    }

    .tab_list .current {
        background-color: red;
        color:aliceblue;
    }

    .item {
        display: none;
    }





<div class="tab">
    <div class="tab_list">
        <ul data-index="2">
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con" >
        <div class="item" style="display: block;">
            商品介绍内容
        </div>
        <div class="item">
            规格与包装内容
        </div>
        <div class="item">
            售后保障内容
        </div>
        <div class="item">
            商品评价内容
        </div>
        <div class="item">
            手机社区内容
        </div>
    </div>
</div>

<p data-str="20" data-list-name="andy"></p>



   <script>
    // 上方模块选项卡，点击某一个，当前这个底色会是红色，其余不变
    // 获取元素
    var tab_list= document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item')
    // for 循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        // 自定义属性index,使li标签有序号
        lis[i].setAttribute('index',i);
        lis[i].onclick = function() {
            // 其余的li清楚class这个类
            for (var i = 0;i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';
            // 内容显示模块
            var index = this.getAttribute('index');
            for(var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            // 留下指定的item 让点击事件绑定的显示出来
            items[index].style.display = 'block';
            
        }
    }

    //  自定义属性是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
    //   自定义属性可以通过getAttribute('属性')获取
    //   有些自定义属性很容易引起歧义  不容易判断是元素的内置属性还是自定义属性
    // H5规定自定义属性data-开头作为自属性名
    // 或Js设置
    var p = document.querySelector('p')
    p.setAttribute('data-index',2)
    // H5新增获取自定义属性的方法
    console.log(p.dataset.index);  // H5新增方法
    console.log(p.dataset['index']); // H5新增方法
    console.log(p.getAttribute('data-index'));  //常用方法
    //  若有两杠如 data-list-name 则H5新增办法需用到驼峰命名法
    console.log(p.dataset.listName);
    console.log(p.dataset['listName']);
   </script>