原生JS代码实现tab选项卡

采用原生JS实现tab选项卡

实现效果：

HTML代码：

<div id="cases-tabs">
  // 默认展开全部 is-active
  <dt class="tab tab-sum all-cases is-active">全部</dt>
  <dt class="tab tab-0 banking">金融</dt>
  <dt class="tab tab-1 energy">能源</dt>
  <dt class="tab tab-2 traffic">民航</dt>
  <dt class="tab tab-3 insurance">社保</dt>
  <dt class="tab tab-4 finance">财务</dt>

  <dd style="display: block">
    <div class="cards">
      <div class="card flap-card banking">
            <a href="#" target="_blank">
                <div class="card__thumbnail lazy">
                </div>
                <div class="card_title">
                    <h2>应用实践</h2>
                </div>
            </a>
         </div>

         <div class="card flap-card banking">
            <a href="#" target="_blank">
                <div class="card__thumbnail lazy">
                </div>
                <div class="card_title">
                    <h2>系统升级</h2>
                </div>
            </a>
         </div>

        <div class="card flap-card banking  ">
            <a href="#" target="_blank">
                <div class="card__thumbnail lazy">
                </div>
                <div class="card_title">
                    <h2>即将上线</h2>
                </div>
            </a>
        </div>

        <div class="card flap-card banking">
            <a href="#" target="_blank">
                <div class="card__thumbnail lazy">
                </div>
                <div class="card_title">
                    <h2>即将上线</h2>
                </div>
            </a>
        </div>

        <div class="card flap-card banking">
            <a href="#" target="_blank">
                <div class="card__thumbnail lazy">
                </div>
                <div class="card_title">
                    <h2>即将上线</h2>
                </div>
            </a>
        </div>

          <div class="card flap-card energy">
              <a href="#" target="_blank">
                  <div class="card__thumbnail lazy">
                  </div>
                  <div class="card_title">
                      <h2>即将上线</h2>
                  </div>
              </a>
          </div>

          <div class="card flap-card energy">
              <a href="#" target="_blank">
                  <div class="card__thumbnail lazy">
                  </div>
                  <div class="card_title">
                      <h2>即将上线</h2>
                  </div>
              </a>
          </div>

          <div class="card flap-card energy">
              <a href="#" target="_blank">
                  <div class="card__thumbnail lazy">
                  </div>
                  <div class="card_title">
                      <h2>即将上线</h2>
                  </div>
              </a>
          </div>

          <div class="card flap-card traffic">
              <a href="TravelSky.html" target="_blank">
                  <div class="card__thumbnail lazy">
                  </div>
                  <div class="card_title">
                      <h2>即将上线</h2>
                  </div>
              </a>
          </div>
      </div>
    </div>
  </dd>
</div>

JS代码：

// 获取所有的选项卡dt，卡片列表card
var dtList = document.querySelectorAll('dt');
var cardList = document.querySelectorAll('.card.flap-card');

for (var i = 0; i < dtList.length; i++) {
    dtList[i].index = i;

    // 当选项卡点击的时候触发
    dtList[i].onclick = function() {
        // 清除 is-active，并所有卡片display:none
        for (var j = 0; j < dtList.length; j++) {
            dtList[j].classList.remove('is-active');
        }
        for (var k = 0; k < cardList.length; k++) {
            cardList[k].style.display = 'none';
        }

        var dtClass = dtList[this.index].className.split(' ')[2];

        if (dtClass === 'all-cases') {
          // 筛选条件是"全部",卡片全部显示
            for (var j = 0; j < cardList.length; j++) {
                cardList[j].style.display = 'block';
            }
        } else {
            for (var j = 0; j < cardList.length; j++) {
                if (cardList[j].className.indexOf(dtClass) >= 0) {
                    cardList[j].style.display = 'block';
                }
            }
        }
        dtList[this.index].classList.add('is-active');
    };
}