JavaScript tab选项卡切换

最新推荐文章于 2025-10-21 09:44:56 发布

原创

最新推荐文章于 2025-10-21 09:44:56 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

下面是一个简单的JavaScript代码示例，展示如何使用tab选项卡来切换内容。

HTML代码：

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>选项卡1</h3>
  <p>这是选项卡1的内容。</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>选项卡2</h3>
  <p>这是选项卡2的内容。</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>选项卡3</h3>
  <p>这是选项卡3的内容。</p>
</div>

CSS代码：

/* 隐藏tab内容 */
.tabcontent {
  display: none;
}

/* 样式化选项卡按钮 */
.tab button {
  background-color: #f2f2f2;
  border: none;
  color: black;
  padding: 10px 20px;
  cursor: pointer;
}

/* 设置激活的