HTML 调用js实现多项滑动门选项卡特效

可以使用HTML和JavaScript实现多项滑动门选项卡特效，以下是一个简单的示例：

HTML代码：

<div class="tab-container">
  <div class="tab-header">
    <ul>
      <li onclick="openTab('tab1')">选项卡1</li>
      <li onclick="openTab('tab2')">选项卡2</li>
      <li onclick="openTab('tab3')">选项卡3</li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane">选项卡1的内容</div>
    <div id="tab2" class="tab-pane">选项卡2的内容</div>
    <div id="tab3" class="tab-pane">选项卡3的内容</div>
  </div>
</div>

CSS代码：

.tab-container {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}

.tab-header {
  border-bottom: 1px solid #ccc;
}

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

.tab-header li {
  float: left;
  padding: 10px;
  border-right: 1px solid #ccc;
  cursor: pointer;
}

.tab-header li:last-child {
  border-right: none;
}

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

.tab-content {
  height: 250px;
  overflow: hidden;
}

.tab-pane {
  padding: 10px;
  height: 100%;
}

JavaScript代码：

function openTab(tabName) {
  var i, tabContent, tabLinks;
  tabContent = document.getElementsByClassName("tab-pane");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }
  tabLinks = document.getElementsByTagName("li");
  for (i = 0; i < tabLinks.length; i++) {
    tabLinks[i].className = tabLinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

这个示例中，我们使用了一个包含选项卡头部和内容的DIV容器。选项卡头部使用一个无序列表来实现，每个列表项都有一个onclick事件，当点击列表项时，触发openTab函数。选项卡内容使用DIV标记来实现，每个内容区域都有一个唯一的ID，用于在openTab函数中切换显示。CSS样式用于美化选项卡的外观。JavaScript代码用于控制选项卡的切换和样式的修改。