JavaScript——tab栏切换效果的实现

具体代码如下：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .d1{
        margin: 100px auto;
        width: 638px;
    }
    .d2{
        height: 39px;
        border: 1px solid #ccc;
        background-color: #CCCCCC;
    }
    .d2 li{
        float:left;
        height: 39px;
        padding: 0 30px;
        line-height: 39px;
        text-align: center;
        cursor: pointer;
    }
    .current{
        background-color: #f3313b;
        color: black;
    }
    li{
        list-style-type: none;
    }
    .item{
        display: none;
    }

</style>
<div class="d1">
    <div class="d2">
        <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
        </ul>
    </div>`
    
    <div class="d3">
        <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>
<script>
    var lis=document.querySelector('.d2').querySelectorAll('li');
    var item=document.querySelectorAll('.item')
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onclick=function (){
            for(var i=0;i<lis.length;i++){
                lis[i].className='';
            }
            this.className='current';
            var index =this.getAttribute('index');
            for(var i=0;i<item.length;i++){
                item[i].style.display='none';
            }
            item[index].style.display='block';
        }
    }
</script>
</body>
</html>

结果图如下：

下面讲一下js代码的具体实现过程，首先来实现上面的导航栏的切换功能，先要获取点击事件的事件源，刚开始先给导航栏的第一个部分显示为点击状态，建立一个class类名，给导航栏添加点击事件，内容比较多，所以用for循环来实现，每当点击一个导航，将该导航的样式设置为选中的样式，这样设置后你会发现一个问题，虽然点击的部分已经显示为选中状态，但是点击过的部分也显示为选中状态，所以要在每次修改之前把所有的部分都设置为未选中状态（排他思想），这样就可以实现了。
接着说在导航栏选中时怎样把相应的内容显示出来，这时候我们要给导航栏的每一个标签设置一个自定义属性，从而实现导航栏与内容的相互对应，类似的这也需要要排他思想。
以上就是这个效果的简单介绍，具体代码如上，欢迎指正学习！