原生js实现tab栏选项卡

最新推荐文章于 2023-02-25 12:03:34 发布

原创最新推荐文章于 2023-02-25 12:03:34 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #css

这篇博客展示了如何使用JavaScript实现菜单项与对应内容的交互。当点击顶部菜单的某个选项时，底部相应的内容区域会显示，同时选中项会高亮显示，其他菜单项恢复默认样式。此功能通过设置元素的class和display属性实现。

  var top1 = document.getElementById('top').getElementsByTagName('li')
  var bot1 = document.getElementById('bottom').getElementsByTagName('div')
  console.log(bot1);
  for(var i= 0;i<top1.length;i++){
    top1[i].setAttribute('index',i)
    top1[i].onclick = function(){
      for(var i= 0;i<top1.length;i++){
        top1[i].className = ''
      }
      this.className = 'current'      //点击哪一个给哪个加类名，变色
     var index = this.getAttribute('index')  //给上面的几栏设置属性
     for(var i= 0;i<top1.length;i++){
      bot1[i].style.display = 'none'   
     }
     bot1[index].style.display = 'block'
    }
  }

  .yifu{
    width: 300px;
    height: 300px;
    background-color: darkkhaki;
  }
  .fruit{
    width: 500px;
    height: 500px;
    background-color: cyan;
  }
  .phone{
    width: 600px;
    height: 300px;
    background-color: blue;
  }
  .block{
    display: block
  }
  .item{
    display: none;
  }
  .max_con{
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }
  li{
  list-style: none;
  }
  #top{
    width: 400px;
    height: 50px;
    /* background-color: red; */
  }
  .bottom>div{
    /* float: left; */
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  #bottom{
    width: 400px;
    height: 50px;
    /* background-color: blue; */
  }
  #top>li{
    float: left;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /* background-color: cyan; */
  }
  .current{
    background-color: yellow;
  }

    <div class="max_con">
        <div id="top">
          <li class="current">手机</li>
          <li>水果</li>
          <li>服装</li>
        </div>
        <div id="bottom">
        <div class="item phone" style="display: block;">手机</div>
        <div class="item fruit">水果</div>
        <div class="item yifu">服装</div>
        </div>
      </div>