JS的tab栏切换

最新推荐文章于 2023-05-28 23:35:58 发布

猪猪大魔王db

最新推荐文章于 2023-05-28 23:35:58 发布

阅读量138

点赞数

分类专栏： JS 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_42654348/article/details/125277764

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .tab-cad{
      height: 4vh;
     }
     .tab-cad .ul li{
      text-align: center;
     }
     .tab-cad .text1{
      background-color: rgb(115, 189, 199);
      color: aliceblue;
      width: 15vw;
      height: 3vh;
      /* border-radius: 30px; */
      padding-top:1vh ;
     }
     .tab-cad ul{
      list-style-type: none;
      display: flex;
      height: 4vh;
      align-items: center;
      justify-content:space-evenly;
      flex-direction: row;
      background-color: rgb(241, 241, 138);
     }
     .tab-nr div{
      display: flex;
      flex-direction: column;

     }
     .tab-nr .items{
      display: none;
      padding-left: 14vw;
      padding-top: 3vh;
     }

    </style>
</head>
<body>
  <div class="bj">
      <div class="tab-cad">
        <ul class="ul">
            <li class="text1" index="0">商品介绍</li>
            <li index="1">规格与包装</li>
            <li index="2">售后保障</li>
            <li index="3">商品评价</li>
            <li index="4">手机社区</li>
        </ul>
      </div>
      <div class="tab-nr">
        <div class="items" style="display:block;" index="0">
          <h3>商品介绍内容</h3>
         // 图片可以换成自己的
          <img src="../assets/2.jpg" alt="" style="width: 60%;">
        </div>
        <div class="items" index="1">
          <h3>规格与包装内容</h3>
          <img src="../assets/彼得兔.jpg" alt="" style="width: 60%;">
        </div>
        <div class="items" index="2">
          <h3>售后保障内容</h3>
          <img src="../assets/海边少年.jpg" alt="" style="width: 60%;">
        </div>
        <div class="items" index="3">
          <h3> 商品评价内容</h3>
          <img src="../assets/2.jpg" alt="" style="width: 60%;">
        </div>
        <div class="items" index="4">
          <h3> 手机社区内容</h3>
          <img src="../assets/彼得兔.jpg" alt="" style="width: 60%;">
        </div>
      </div>
      <div class="sh">

      </div>
      <div class="pj">

      </div>
  </div>
<script>
  //1.获取元素
   var tab_cad = document.querySelector('.tab-cad');//获取tab-cad
   var list = tab_cad.querySelectorAll('li');//获取li值
   var items = document.querySelectorAll('.items');//获取items
   //2.for循环绑定点击事件 
  for(var i = 0;i<list.length;i++){
    //开始给五个小li设置索引号
    //setAttribute(name,value)，增加一个指定名称和新属性，或者把一个现有属性设定为指定的值
    //保存数据然后用getAttribute（）方法来取
    list[i].setAttribute('index',i);//5个li的索引，

    list[i].onclick = function(){
      //排他思想：干掉所有人留下我自己
      for(var i = 0;i<list.length;i++){
        list[i].className = '';
      }
      //不点击的时候就隐藏
      for(var i = 0;i<items.length;i++){
        items[i].style.display = 'none'; 
      }
      //留下我自己，css点击改变样式
      this.className = 'text1';
      //2.下面的显示内容模块（点击哪一个list对应显示相应内容，给li添加自定义属性）
      var index = this.getAttribute('index');
     // console.log(index);
      items[index].style.display = 'block';//点击显示对应卡
    }
  }
  
</script>
</body>

</html>