单击动态选项卡时调用Javascript函数

<ul id="tab-nav">
  <li onclick="changeTab(0)">Tab 1</li>
  <li onclick="changeTab(1)">Tab 2</li>
  <li onclick="changeTab(2)">Tab 3</li>
</ul>

<div id="tab-content">
  <div class="tab-pane">Content 1</div>
  <div class="tab-pane">Content 2</div>
  <div class="tab-pane">Content 3</div>
</div>

function changeTab(index) {
  var navItems = document.getElementById("tab-nav").getElementsByTagName("li");
  var contentItems = document.getElementById("tab-content").getElementsByClassName("tab-pane");

  // 隐藏所有选项卡内容
  for (var i = 0; i < contentItems.length; i++) {
    contentItems[i].style.display = "none";
  }

  // 显示当前选项卡内容
  contentItems[index].style.display = "block";

  // 切换选项卡样式
  for (var i = 0; i < navItems.length; i++) {
    navItems[i].classList.remove("active");
  }
  navItems[index].classList.add("active");
}