纯手工JS写法tab切换特效代码，菜单导航切换效果

本文主要为大家详细介绍了js实现tab栏切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

思路：

1.点击每个tab时。要先用排他思想，使得所有li不加上背景，再让点击的tab加上某个类。

2.上面的tab与下面显示内容的页面是一一对应的。因此，可以使用自定义属性，使tab加上一个index索引，这样就能知道每次点击的是哪一个tab了。

3.最后仍然使用排他思想，当点击tab时，先让所有的内容都不显示，再让对应的内容进行显示。

代码：

<style>
.new_nav{ width:100%; height:50px; overflow:hidden}
.new_nav li{ float:left; list-style-type:none; padding:0 10px;}
.new_nav li.active{ color:#F00}
.list_li{ display:none;}
</style>
<div class="new_nav">
  <ul>
    <li class="tab active">全部</li>
    <li class="tab">11111</li>
    <li class="tab">22222</li>
    <li class="tab">33333</li>
  </ul>
</div>
<div class="list_box">
  <div class="list_li" style="display:block">aaaaa</div>
  <div class="list_li">bbbbb</div>
  <div class="list_li">ccccc</div>
  <div class="list_li">ddddd</div>
</div>
<script>
var lis = document.querySelectorAll('.tab');
var detail = document.querySelector('.list_box');
var items = detail.querySelectorAll('.list_li');
for (var i = 0; i < lis.length; i++) {
    lis[i].setAttribute('index', i);
    var index;
    lis[i].onclick = function() {
        for (var j = 0; j < lis.length; j++) {
            lis[j].className = 'tab';
            items[j].style.display = 'none';
        }
        this.className = 'tab active';
        index = this.getAttribute('index');
        items[index].style.display = 'block';
    }
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持建站学习网。

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏