如何为移动响应式浏览创建/修复垂直导航选项卡？

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

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

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

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

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

.tab-content {
  display: none;
}

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

var tabs = document.querySelectorAll('.nav-tabs li');
var contents = document.querySelectorAll('.tab-content .tab-pane');

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    var index = Array.prototype.indexOf.call(this.parentNode.children, this);
    
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
      contents[j].classList.remove('active');
    }
    
    this.classList.add('active');
    contents[index].classList.add('active');
  });
}