tab栏切换(新手多看,tab栏)

最新推荐文章于 2025-04-20 12:48:12 发布

好奇的布偶猫

最新推荐文章于 2025-04-20 12:48:12 发布

阅读量583

点赞数 4

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_45785652/article/details/106593187

版权

本文介绍了一种使用JavaScript实现选项卡切换的方法，通过遍历并给每个选项卡注册事件，利用排他思想控制显示与隐藏，实现动态切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
  //获取元素
  var spanList = document.querySelectorAll("span");
  var liList = document.querySelectorAll("li");
  //遍历每个span
  for (let i = 0; i < spanList.length; i++) {
    // 注册事件
    spanList[i].onclick = function () {
      for (let j = 0; j < spanList.length; j++) {
        //排他思想
        if (j == i) {
          spanList[j].className = "current";
          liList[j].style.display = "block";
        } else {
          spanList[j].className = "";
          liList[j].style.display = "none";
        }
      }
    };
  }

思路讲解
1.遍历切换栏选项卡
2.给每个切换栏选项卡注册事件
3.利用双循环依次判断两个元素是否相等，如果相等则设置相应的属性，如不相等则恢复默认。
4.因为用的是ES6的let则不需要获取当前点击按钮的索引



以下是var的使用需要获取点击按钮索引
```javascript
for (var i = 0; i < spanList.length; i++) {
      //2.1 给每一个span标签添加一个自定义index
      spanList[i].setAttribute('index', i);
      //2.2给每一个span标签添加点击事件
      spanList[i].onclick = function () {
        //3： 点击span标签，自身样式发生变化，对应下标的li模块显示
        //排他思想去除其他span的样式，并且隐藏其他模块li

        //3.1 获取当前点击的span下标
        var index = this.getAttribute('index');

        //3.2 排他思想去除其他span的样式，并且隐藏其他模块li
        for (var j = 0; j < spanList.length; j++) {
          if (j == index) {
            spanList[j].className = 'current';
            liList[j].style.display = 'block';
          } else {
            spanList[j].className = '';//自身类名清空
            liList[j].style.display = 'none';//对应j下标的模块li标签隐藏
          }
        }
      }
    }
————————————————
版权声明：本文为优快云博主「巨棍」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_47198024/article/details/106445916