css tab选项卡代码

选项卡是Web设计中常见的功能，可以让用户通过不同的标签页切换查看不同的内容。CSS提供了很多实现选项卡的方法，其中一种常用的方法是使用伪元素和CSS3的:target选择器实现。下面是一个基本的CSS tab选项卡代码。

<div class="tab">
  <div class="tab-nav">
    <a href="#tab1">标签1</a>
    <a href="#tab2">标签2</a>
    <a href="#tab3">标签3</a>
  </div>
  <div class="tab-content">
    <div id="tab1">标签1的内容</div>
    <div id="tab2">标签2的内容</div>
    <div id="tab3">标签3的内容</div>
  </div>
</div>

css tab选项卡代码

CSS代码如下：

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

.tab-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.tab-nav a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-right: none;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  background-color: #f7f7f7;
}

.tab-nav a:last-child {
  border-right: 1px solid #ccc;
}

.tab-nav a:target {
  background-color: #fff;
}

.tab-content div {
  display: none;
}

.tab-content div:target {
  display: block;
}

以上代码中，我们首先定义了一个class为tab的容器，用于包含选项卡导航菜单和内容。容器的样式包括边框、内边距等。选项卡导航菜单的样式使用了flex布局，并设置了间距和各种样式，其中a元素的样式定义与常规链接略有不同。

使用a元素的target属性可以轻松实现选项卡切换的效果，在CSS中通过`:target`选择器来应用样式。通过定义默认隐藏所有选项卡对应的内容，对已激活的选项卡使用`:target`选择器显示对应的内容。

使用以上代码可以快速实现纯CSS选项卡效果，当然你也可以根据自己的需求修改和定制样式。

相关推荐