设置javascript选项卡

<ul class="tab-navigation">
  <li class="active" onclick="changeTab(0)">Tab 1</li>
  <li onclick="changeTab(1)">Tab 2</li>
  <li onclick="changeTab(2)">Tab 3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">
    <h3>Tab 1 Content</h3>
    <p>This is the content of Tab 1.</p>
  </div>
  <div class="tab-pane">
    <h3>Tab 2 Content</h3>
    <p>This is the content of Tab 2.</p>
  </div>
  <div class="tab-pane">
    <h3>Tab 3 Content</h3>
    <p>This is the content of Tab 3.</p>
  </div>
</div>

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

.tab-navigation li {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.tab-navigation li.active {
  background-color: #ccc;
}

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

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

function changeTab(index) {
  var tabPanes = document.getElementsByClassName("tab-pane");
  var tabNavItems = document.getElementsByClassName("tab-navigation")[0].getElementsByTagName("li");

  for (var i = 0; i < tabPanes.length; i++) {
    tabPanes[i].classList.remove("active");
    tabNavItems[i].classList.remove("active");
  }

  tabPanes[index].classList.add("active");
  tabNavItems[index].classList.add("active");
}