Tab栏切换案例（DOM操作）

目录

前言

一、HTML页面

二、实现标签栏切换的具体代码

三、效果展示

四、总结

---

前言

标签栏在网站中的使用非常广泛，他的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换。

一、HTML页面

  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">待付款</li><!--这里添加了一个current样式，用于实现当前标签的选中效果-->
        <li>待发货</li>
        <li>待收货</li>
        <li>待评价</li>
        <li>退款/售后</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">代付款列表</div><!--用于显示当前标签下的内容，隐藏其他标签下的内容-->
      <div class="item">待发货列表</div>
      <div class="item">待收货列表</div>
      <div class="item">待评价列表</div>
      <div class="item">退款/售后详情</div>
    </div>
  </div>

二、实现标签栏切换的具体代码

<script>
    var tab_list = document.querySelector('.tab_list');//获取标签部分的所有元素对象
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');// 获取内容部分的所有内容对象
    for (var i = 0; i < lis.length; i++) {//for循环绑定点击事件
      lis[i].setAttribute('index', i);//开始给5个小li设置索引号
      lis[i].onclick = function () {
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = '';
        }
        this.className = 'current';
        //显示当前鼠标单击的标签及其对应的内容，隐藏其他标签的显示
        var index = this.getAttribute('index');
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
      };
    }
  </script>

三、效果展示

 四、总结

主要用了排他思想实现单击当前项，用来清除li的class类，并给自己设置current类。用jQuery来实现就要比用DOM操作来实现简单一些。