implémentation CSS de l'onglet

Dans la conception Web, obtenir un effet de changement d'onglet est une exigence courante. Cet effet peut être facilement obtenu en utilisant CSS. Expliquons en détail comment utiliser CSS pour réaliser le changement d'onglet.

Tout d’abord, nous devons préparer le code HTML. Le changement d'onglet est souvent composé d'un ensemble de zones de contenu et de boutons de navigation correspondants, comme indiqué ci-dessous :

<div class="tabs">
  <div class="tab-nav">
    <a href="#" class="active">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">Tab 3</a>
  </div>
  <div class="tab-content active">
    <p>这是Tab 1的内容</p>
  </div>
  <div class="tab-content">
    <p>这是Tab 2的内容</p>
  </div>
  <div class="tab-content">
    <p>这是Tab 3的内容</p>
  </div>
</div>

Dans cet exemple, nous utilisons un conteneur .tabs pour charger les éléments liés aux onglets, y compris les boutons de navigation. et la zone de contenu. .tab-nav est utilisé pour placer le bouton de navigation de l'onglet, .tab-content est utilisé pour placer le contenu de l'onglet et .active représente le bouton de navigation ou la zone de contenu est l'état par défaut. .tabs的容器来装载Tab相关元素，包括导航按钮与内容区域。.tab-nav用于放置Tab导航按钮，.tab-content用于放置Tab内容，.active表示导航按钮或内容区域的默认状态。

接下来，我们需要利用CSS来实现Tab切换效果。我们可以用伪类:hover或:focus来实现导航按钮的悬停或聚焦效果，例如：

.tab-nav a:hover,
.tab-nav a:focus {
  background-color: #ccc;
}

这里我们为.tab-nav a添加了:hover和:focus伪类，当鼠标悬停或导航按钮被聚焦时，会出现背景色#ccc的效果。这样用户可以更直观地感知被选中的Tab。

接下来，我们需要为Tab切换添加一个动画效果。我们可以通过使用CSS3的transition属性来实现这个效果，例如：

.tab-content {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.tab-content.active {
  opacity: 1;
}

这里我们将.tab-content的默认状态opacity设为0，表示没有内容显示。然后我们对.tab-content添加了一个transition属性，表示在0.3秒内，产生一个淡入淡出的效果。而当.tab-content处于.active状态时，opacity被设为1，显示具体的内容。

最后，我们需要实现Tab导航按钮与内容区域的联动，这里我们可以使用CSS的:target伪类，例如：

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

.tab-content {
  display: none;
}

这里我们为.tab-content添加:target伪类，表示仅当该元素被锚点目标定位时才将该元素的display设为block，显示具体内容。而在没有被锚点目标定位时，则将.tab-content的display设为none

<div class="tabs">
  <div class="tab-nav">
    <a href="#tab1" class="active">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
  </div>
  <div class="tab-content active" id="tab1">
    <p>这是Tab 1的内容</p>
  </div>
  <div class="tab-content" id="tab2">
    <p>这是Tab 2的内容</p>
  </div>
  <div class="tab-content" id="tab3">
    <p>这是Tab 3的内容</p>
  </div>
</div>

.tab-nav a:hover,
.tab-nav a:focus {
  background-color: #ccc;
}

.tab-content {
  opacity: 0;
  transition: opacity .3s ease-in-out;
  display: none;
}

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

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

.tab-content {
  display: none;
}