JS实现tab栏切换效果

  功能描述：点击不同的标签，显示不同的内容，被点击的标签样式发生改变。这里显示图片为例子。

html部分如下

 <div class="out">
        <ul class="title">
            <li ><button class="current">第一张</button></li>
            <li><button>第二张</button></li>
            <li><button>第三张</button></li>
            <li><button>第四张</button></li>

        </ul>
        <ul class ="picture">
            <li class="item" ><img src="../img/prac.jpg" alt=""></li>
            <li class="item"><img src="../img/beij.jpg" alt=""></li>
            <li class="item"> <img src="../img/纯色.png" alt=""></li>
            <li class="item"><img src="../img/少年.jpg" alt=""></li>

        </ul>



    </div>

具体实现步骤：

首先tab栏分成两个部分，上面导航条点击，下面显示不同内容。

首先是上面的导航条实现点击切换背景，我们只需要添加一个类如下（可以根据需求添加其他样式）

.current {
            background-color: tomato;
        }

接下来就是谁点击给谁加这个类名，但是同时我们要清除上一个被点击过的背景颜色，这里运用排他思想，每次点击的时候循环遍历把所有的点击按钮背景清空（就是类名为空）。如下

var bts=document.querySelectorAll('button');
var items=document.querySelectorAll('.item');


   for(var i=0;i<bts.length;i++){
        
             bts[i].onclick=function(){
              
                for(var i=0;i<bts.length;i++){
                    bts[i].className='';
                }
                this.className='current';


            }
          

        }

完成后成功实现

 接下来我们要实现点击切换，难点在于我们怎么判断对应顺序，这里也是采用js添加自定义属性的方法，为了防止有很多需要添加，我们这里使用循环让代码给我们添加

  for(var i=0;i<bts.length;i++){
            bts[i].setAttribute('data-index',i);
}

现在都有我们添加的索引值了，我们获取所有的图片容器，对应索引值的样式设置可见即可

  var items=document.querySelectorAll('.item');//获取图片容器  也就是要显示的内容
  var index=this.getAttribute('data-index');  //获取我们上边添加的索引值
  items[index].style.display='block';   //对应的设置为可见就可以啦

但是我们每次只想显示一个对应的内容，所以我们再次用到了排他思想，再添加一个循环就可以了

 for(var i=0;i<items.length;i++){
                    items[i].style.display='none';
                }

最后我们整理代码 完成最后的js部分代码

 <script>
        var bts=document.querySelectorAll('button');
        var items=document.querySelectorAll('.item');
        for(var i=0;i<bts.length;i++){
            bts[i].setAttribute('data-index',i);
           
            bts[i].onclick=function(){
              
                for(var i=0;i<bts.length;i++){
                    bts[i].className='';
                }
                this.className='current';

                var index=this.getAttribute('data-index');
                for(var i=0;i<items.length;i++){
                    items[i].style.display='none';
                }
                items[index].style.display='block';



            }
          

        }
    </script>

效果如下

 最后这种tab栏目一开始默认选中第一张的，我们在css修改一下就可以了

css部分代码

 .out {
            width: 500px;
            margin: 100px auto;
        }

        ul {
            list-style: none;
        }

        img {
            width: 300px;
            height: 200px;

        }

       
        .title li {
            float: left;
            margin: 0 5px;
          

        }

        .picture li {
            display: none;
        }
        .picture li:first-child{
            display: block;
        }

        .title::after {
            content: '';
            display: table;
            clear: both;
        }

       

        .current {
            background-color: tomato;
        }