tab栏切换

最新推荐文章于 2023-01-27 01:17:04 发布

尹太初

最新推荐文章于 2023-01-27 01:17:04 发布

阅读量1.1k

点赞数 4

文章标签： js css javascript html

本文链接：https://blog.csdn.net/weixin_46323591/article/details/106251214

版权

1.首先事件源是 li 有多个li 所以必须先for循环

2. 第二点击当前的那个 li 要变色，所以需先把所有的 li 的背景色都设为空值（为了方便，我选择把修改的内容定义一个类放在css里, 操作时直接className）

3. 既然五个div出现的导火索是 li ，所以他们肯定是要有联系的，所以在最开始的 for 循环里面给每个 li 一个自定义属性值，而值刚好是索引号，利用 i 的每次循环（是在点击 li 之后出现的，所以要在 li 里面的写）在这里插入图片描述
3… 把当前 li 的自定义属性值提取存放到一个变量, 好给呈现的内容
4. 到这一步的效果是点击的每个 li 内容是全部出现，我们不需要，所以像之前的 li 一样把所有内容干掉none化，然后在修改显示block

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     * {
       margin: 0;
       padding: 0;
     }
     a {
       text-decoration: none;
     }
     li {
       list-style: none;
     }
   .tab {
     width: 900px; 
     margin: 100px 100px;
   }
   .tab_list {
    height: 40px;
     background-color:#F3F0F1;
   }
   .tab_list li {
     float: left;
     padding: 10px 20px;
     font-size: 14px;
   }
   .tab_list li:hover {
    cursor:pointer;
   }
   
   .gb {
    background-color: #D72820;
    color: #fff;
   }
   .itme{
     margin-top: 10px;
     display: none;
   } 
  
  </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
          <ul>
            <li class="gb">商品介绍</li>
            <li>规格预包装</li>
            <li>售后保障</li>
            <li>商品评价(50000)</li>
            <li>手机社区</li>
          </ul>
        </div>
        <div class="tab-con">
           <div class="itme" style="display: block">商品介绍模块</div>
           <div class="itme">规格预包装模块</div>
           <div class="itme">售后保障模块</div>
           <div class="itme">商品评价(50000)模块</div>
           <div class="itme">手机社区模块</div>
        </div>
    </div>
</body>
<script>
   var tab_list = document.querySelector('.tab_list');
   var lis = tab_list.querySelectorAll('li');
   var items = document.querySelectorAll('.itme');
     for(var i = 0; i < lis.length; i++){
       //给Li设置索引号
       lis[i].setAttribute('index', i);

        lis[i].onclick = function() {

          for(var i = 0; i < lis.length; i++){
            lis[i].className = '';
          }

           this.className = 'gb';
           var m = this.getAttribute('index');//获取当前自定义属性值，也就是索引号
           //干掉所有人
           for(var i = 0; i < items.length; i++){
              items[i].style.display = 'none';
           }

           items[m].style.display = 'block';

        }
     }
     
</script>
</html>