tab栏切换

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>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页