css中点击选项卡

CSS 中的点击选项卡是一种十分实用的功能，可以让网页的用户可以方便地查看和切换不同的内容。

想要实现这个功能，我们需要使用 CSS 选择器来选择要控制的选项卡和需要切换显示的内容区域。

/* 为选项卡添加样式 */
.tab {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  cursor: pointer;
}

/* 为选中的选项卡添加样式 */
.tab.active {
  background-color: #fff;
}

/* 隐藏所有内容区域 */
.content {
  display: none;
}

/* 显示选中的内容区域 */
.content.active {
  display: block;
} 

上面的代码中，我们首先定义了选项卡和内容区域的样式。其中，选项卡使用了 display: inline-block 让其像行内元素一样对待，但又可以设置宽高等属性，从而可以实现水平排列的效果。

然后，我们使用 cursor: pointer 让鼠标放在选项卡上时显示手指形状，表示可以点击。

在选择器的部分，我们使用 .tab.active 和 .content.active 来表示被选中的选项卡和对应的内容区域。这里我们使用了相同的类名来控制它们的显示状态。

<!-- HTML 代码 -->
<div class="tabs">
  <div class="tab active" data-target="#content1">选项卡1</div>
  <div class="tab" data-target="#content2">选项卡2</div>
  <div class="tab" data-target="#content3">选项卡3</div>
</div>
<div class="contents">
  <div class="content active" id="content1">内容1</div>
  <div class="content" id="content2">内容2</div>
  <div class="content" id="content3">内容3</div>
</div> 

最后，我们需要在 HTML 代码中为每一个选项卡定义一个 data-target 属性，该属性的值为对应的内容区域的 id 值。并且，我们需要使用 JavaScript 来为选项卡添加点击事件，当点击某个选项卡时，将其加上 active 类名，并将其对应的内容区域也加上相同的类名。

使用上述方法，可以实现一个简单的点击选项卡效果。如果需要更多的功能和效果，可以参考相关的 CSS 框架或库，如 Bootstrap、Foundation 等。