原生JS实现tab组件联动

最新推荐文章于 2022-09-05 16:15:19 发布

会加速的蜗牛

最新推荐文章于 2022-09-05 16:15:19 发布

阅读量558

点赞数 2

分类专栏：前端 javaScript

本文链接：https://blog.csdn.net/qq_23244029/article/details/93517575

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javaScript

8 篇文章 0 订阅

订阅专栏

吐槽下这编辑器居然还没有居中的。当当当当，我又回来了，请了一周假去学校毕业，舒服，今天回来就是各种赶，一天做了三个页面。其中比较值得分享的还是这个tab组件。先上图：

那么大致上的效果就是当我点击tab1的时候显示的是content1内容块，点击tab2或3的时候显示为content2或3内容。

好了，先上代码块:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>实现Tab组件</title>
  <link rel="stylesheet" type="text/css" href="tab.css">
</head>

<body>
  <div id="container1">
    <ul class="tab-list">
      <li class="tab-item" href="panel-1">tab1</li>
      <li class="tab-item" href="panel-2">tab2</li>
      <li class="tab-item" href="panel-3">tab3</li>
    </ul>
    <div class="panel active" id="panel-1">content1</div>
    <div class="panel" id="panel-2">content2</div>
    <div class="panel" id="panel-3">content3</div>
  </div>
  <script>


    /**
     * Tab 组件
     * @param {String} containerId 容器Id
     */
    function Tab(containerId) 
    {
      var cont1 = document.getElementById(containerId);
      // 获取tab组
      var tab_items = cont1.getElementsByClassName('tab-item');
      // 获取panel组
      var pls = cont1.getElementsByClassName('panel');
      // console.log(tab_items);
   
      
      for(let i = 0;i < tab_items.length;i++){
       
        // var tab_sel = document.getElementById(tab_items[i].attributes["href"].value);
        // console.log(tab_sel);
        tab_items[i].onclick = function(e){
          console.log(e);
          // console.log(index);
          // console.log(tab_items.length);
          for(let j = 0;j<tab_items.length;j++){
            // console.log(j);
            if(i == j){
              pls[i].style.display = "block";
            }else{
              pls[j].style.display = "none";
            } 
          }
          
        }
      }
      
    }

    /**
     * active 方法，可以控制第几个 Tab 组件显示
     * @param {Number} index 要显示的 tab 的序号，从0开始
     */
    Tab.prototype.active = function (index) 
    {

    }

    var tab = new Tab('container1');

  </script>
</body>

</html>

还是老样子，取其中重要代码讲下思路就是:

1.首先获取容器，tab组和panel组（content）

2.循环每个tab为其添加onclick方法，点击时触发

3.当其被点击时，遍历panel组，改变其对应的内容块display属性为block,而其他的全部为none

当然也可以为其添加样式，这里大家自由发挥就好了

那么有什么用呢，比如可以这样用:

在订单页面，可以在tab下面添加border-bottom,以及改变其字体颜色，这里不做过多赘述了，虽然是很基础的东西，不过今天再次用到了，就顺手拿出来记录下，哈哈，健身去了。

for(let i = 0;i < tab_items.length;i++){

    // var tab_sel = document.getElementById(tab_items[i].attributes["href"].value);
    // console.log(tab_sel);
    tab_items[i].onclick = function(e){
      console.log(e);
      // console.log(index);
      // console.log(tab_items.length);
      for(let j = 0;j<tab_items.length;j++){
        // console.log(j);
        if(i == j){
          pls[i].style.display = "block";
          tab_items[i].style.cssText = 'color: black;border-bottom: 0.1rem solid rgb(254,210,61);';//test
        }else{
          pls[j].style.display = "none";
          tab_items[j].style.cssText = 'color:gray;border-bottom:none;';
        } 
      }
      
    }
  }

会加速的蜗牛

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现tab组件联动

吐槽下这编辑器居然还没有居中的。当当当当，我又回来了，请了一周假去学校毕业，舒服，今天回来就是各种赶，一天做了三个页面。其中比较值得分享的还是这个tab组件。先上图：那么大致上的效果就是当我点击tab1的时候显示的是content1内容块，点击tab2或3的时候显示为content2或3内容。好了，先上代码块:<!DOCTYPE html><html>...
复制链接

扫一扫