CSS 使用HTML CSS创建垂直选项卡

在本文中，我们将介绍如何使用HTML和CSS创建垂直选项卡。垂直选项卡是一种常见的在网页中组织内容的方式。通过垂直选项卡，用户可以点击不同的选项来浏览不同的内容，这样可以有效地节省页面上的空间。

阅读更多：CSS 教程

创建基本结构

首先，我们需要创建基本的HTML结构来容纳选项卡。我们可以使用无序列表（ul）和列表项（li）来实现这个目的。下面是一个基本的HTML结构示例：

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

<div class="tab-content">
  <div class="content active">
    <h3>选项1内容</h3>
    <p>这是选项1的内容。</p>
  </div>
  <div class="content">
    <h3>选项2内容</h3>
    <p>这是选项2的内容。</p>
  </div>
  <div class="content">
    <h3>选项3内容</h3>
    <p>这是选项3的内容。</p>
  </div>
</div>

在这个例子中，我们使用了一个无序列表来作为选项卡，每个选项都是一个列表项。选项卡的内容则放在一个div元素中，每个选项对应一个div。

CSS样式

接下来，我们使用CSS样式来实现选项卡的垂直布局和交互效果。首先，我们将选项卡设置为垂直排列，并添加一些基本样式：

.tabs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tabs li {
  background-color: #f1f1f1;
  padding: 10px;
}

.tabs li.active {
  background-color: #ddd;
}

这些样式将使选项卡成为垂直排列的列表，并添加了一些基本的背景颜色和间距。

然后，我们还需要添加一些CSS样式来控制选项卡切换时的效果：

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

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

这些样式将隐藏除了活动选项卡之外的所有内容，并在切换选项卡时显示相应的内容。

JavaScript交互

要使选项卡可以交互，我们需要添加一些JavaScript代码来监听选项卡的点击事件，并切换对应的内容。下面是一个简单的JavaScript代码示例：

const tabs = document.querySelectorAll('.tabs li');
const contents = document.querySelectorAll('.tab-content .content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(tab => tab.classList.remove('active'));
    contents.forEach(content => content.classList.remove('active'));

    tab.classList.add('active');
    contents[index].classList.add('active');
  });
});

这段代码将为每个选项卡添加了一个点击事件监听器。当点击某个选项卡时，它的样式将被设置为active，并显示相应的内容。

示例

通过上述的HTML、CSS和JavaScript代码，我们可以创建一个垂直选项卡。当用户点击不同的选项卡时，相应的内容将切换显示。

下面是一个完整的示例演示：

<!DOCTYPE html>
<html>
  <head>
    <title>垂直选项卡示例</title>
    <style>
      /* CSS样式 */
    </style>
  </head>
  <body>
    <ul class="tabs">
      <li class="active">选项1</li>
      <li>选项2</li>
      <li>选项3</li>
    </ul>

    <div class="tab-content">
      <div class="content active">
        <h3>选项1内容</h3>
        <p>这是选项1的内容。</p>
      </div>
      <div class="content">
        <h3>选项2内容</h3>
        <p>这是选项2的内容。</p>
      </div>
      <div class="content">
        <h3>选项3内容</h3>
        <p>这是选项3的内容。</p>
      </div>
    </div>

    <script>
      // JavaScript代码
    </script>
  </body>
</html>

你可以在你的浏览器中打开这个示例来查看垂直选项卡的效果。