前端必学----tab切换

马铃薯和土豆

于 2021-01-21 21:58:48 发布

阅读量482

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_15739739/article/details/112972993

这篇博客详细介绍了如何使用JavaScript实现Tab切换功能。通过给每个Tab按钮和内容区域设置索引，点击Tab按钮时，利用排他思想隐藏其他内容并显示相应模块。代码中涉及到DOM操作、事件监听和样式修改等核心概念。

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

Tab切换有两个大的模块,点击某一个,当前这个底色和内容一一对应,(排他思想)

  <script>
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    //for 循环绑定点击事件
    for (var i = 0; i < lis.length; i++){
      //开始给5个li 设置索引号
      lis[i].setAttribute('index',i)
      lis[i].onclick = function(){
        //干掉其他人 其余的li清除 class 在这个类
        for(var i = 0; i < lis.length; i++){
          lis[i].className = '';
        }
        //留下我自己
        this.className = 'current'
        //下面显示内容模块
        var index = this.getAttribute('index');
        //干掉其他人 让其他的item 这些div 隐藏
        for(var i = 0; i < items.length; i++;){
          items[i].style.display = 'none';
        }
        //点击那个显示哪一个
        items[i].style.display = 'block';
      }
    }
  </script>