我想在单击选项卡时显示两个片段

<ul class="tab-nav">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">选项卡1的内容</div>
  <div class="tab-pane">选项卡2的内容</div>
</div>

.tab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab-nav li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-nav li.active {
  background-color: #f00;
  color: #fff;
}

.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active {
  display: block;
}

var tabNav = document.querySelectorAll('.tab-nav li');
var tabContent = document.querySelectorAll('.tab-content .tab-pane');

for (var i = 0; i < tabNav.length; i++) {
  tabNav[i].addEventListener('click', function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabNav.length; j++) {
      tabNav[j].classList.remove('active');
    }
    // 添加当前选项卡的active类
    this.classList.add('active');

    // 隐藏所有内容区域
    for (var k = 0; k < tabContent.length; k++) {
      tabContent[k].style.display = 'none';
    }
    // 显示对应的内容区域
    var index = Array.prototype.indexOf.call(tabNav, this);
    tabContent[index].style.display = 'block';
  });
}