js实现tab栏点击切换

核心原理：
1、给按钮li用for循环添加自定义属性，i是自定义的值，成功添加索引号；
2、当鼠标点击li，循环让所有兄弟去掉类，被点击的li则添加类；
3、把当前点击的li的自定义属性值（索引号）存为变量；
4、循环item内容区域，其他的display都隐藏，和li相同索引号的留下来；

HTML:

    <div class="tabs">
        <ul class="nav">
            <li class="current">电脑</li>
            <li>手机</li>
            <li>空调</li>
        </ul>
        <ol>
            <a href="javascript:;" style="display: block;">电脑模块</a>
            <a href="javascript:;">手机模块</a>
            <a href="javascript:;">空调模块</a>
        </ol>
    </div>

CSS:

<style>
    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
    }
    a {
        font-size: 18px;
        color: #333;
    }
    .nav {
        width: 1000px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #eee;
 
    }
    .nav>li {
        float: left;
        width: 100px;
        margin-right:  20px;
        font-size: 20px;
        cursor: pointer;
    }
    .current {
        background-color: crimson;
        color: #fff;
    }
    ol>a {
        display: none;
    }
</style>

JS:

<script>
    // 获取元素
    var tabs = document.querySelector('.tabs');
    var nav = document.querySelector('.nav');
    var ol = document.querySelector('ol');
    var lis = document.querySelectorAll('li');
    var as = document.querySelectorAll('a');


    // 1、循环给li添加自定义属性，值是i,为了获取到索引号
    for(i = 0;i < lis.length;i++) {
        lis[i].setAttribute('index',i);

        // 只要是对一个组做一个事件，就要循环，所以点击lis事件也要在当前循环里面写；
        // 当点击lis[i]，全部删除类，自己添加类；
        lis[i].onclick = function() {
            for(i = 0;i < lis.length;i++) {
                lis[i].className = '';
            }
            this.className = 'current';
            // 把当前点击的自定义属性值给存为变量（获取索引号）
            var index = this.getAttribute('index');
            // 再次循环把a模块内容全部隐藏，li对应的模块留下
            for(i = 0;i < as.length; i++) {
                as[i].style.display = 'none';
            }
            as[index].style.display = 'block';
        }
    }
</script>