[分享]css3实现tab效果

CSS3是现代Web开发中必不可少的技术之一，它可以让我们实现非常丰富的效果。其中，使用CSS3来实现Tab效果是很常见的需求之一。下面，我将分享一下如何利用CSS3来实现Tab效果。//HTML结构...

CSS3是现代Web开发中必不可少的技术之一，它可以让我们实现非常丰富的效果。其中，使用CSS3来实现Tab效果是很常见的需求之一。下面，我将分享一下如何利用CSS3来实现Tab效果。

//HTML结构
<div class="tab">
  <ul class="tab-title">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">这是Tab 1的内容</div>
    <div class="tab-pane">这是Tab 2的内容</div>
    <div class="tab-pane">这是Tab 3的内容</div>
  </div>
</div>

//CSS样式
.tab-title{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
}
.tab-title li{
  flex:1;
  text-align:center;
  padding:10px 0;
  cursor:pointer;
  position:relative;
}
.tab-title li.active{
  background-color:#000;
  color:#fff;
}
.tab-title li.active::before{
  content:';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background-color:#fff;
}

.tab-content{
  padding:20px;
}

.tab-pane{
  display:none;
}
.tab-pane.active{
  display:block;
} 

首先，我们来看看HTML结构。我们使用了一个

元素作为父容器，

• 元素代表Tab标题栏，

  元素代表Tab内容区。在标题栏中，每个Tab的标题使用

• 元素表示。在内容区中，每个Tab的内容使用一个

  元素表示。其中，每个Tab标题的索引与内容区的索引是一一对应的。

  接下来，我们来看看CSS样式。首先，我们去掉了标题栏中的列表样式，并使用Flex布局让所有Tab标题水平排列。我们给每个

• 元素设置了相同的宽度，并设置了光标样式为指针。在内容区中，我们将所有Tab的内容隐藏，仅仅显示当前选中的Tab中的内容。

  接下来，我们用CSS伪类选择器:hover和::before来实现Tab标题栏的鼠标悬停效果和Tab之间的底部分割线效果。我们给当前选中的Tab设置了一个背景颜色和一个白色的下划线，这样可以让用户更直观的知道当前选中的Tab是哪一个。

  现在，我们已经成功的实现了一个基本的CSS3 Tab效果。如果你希望更进一步的美化Tab样式，你可以针对你的具体需求进行进一步的修改。