Comment implémenter le changement d'onglet avec CSS

Méthode CSS pour implémenter le changement d'onglet : en utilisant les caractéristiques de la cible, vous pouvez obtenir un changement d'effet d'onglet CSS pur, le code est [#tab1:target,#tab2:target,#tab3:target{z-index :1;}].

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Méthode CSS pour implémenter le changement d'onglet :

Cible de pseudo-classe CSS3

En utilisant les caractéristiques de la cible, vous pouvez obtenir un changement d'effet d'onglet CSS pur

L'exemple de code est le suivant

Le code est le suivant :

 
 
 
tab1
 
tab2
 
tab3
 
 
tab1
 
tab2
 
tab3
 

Le code le plus critique

Le code est le suivant :

#tab1:target,#tab2:target,#tab3:target{ z-index:1; }

D'abord selon L'ancre caractéristique de la cible est liée au div correspondant, puis la relation hiérarchique du div est modifiée en fonction de l'attribut z-index, obtenant ainsi l'effet de changement d'onglet !

Compatibilité cible

Enfin, permettez-moi de mentionner le problème de compatibilité : comme il s'agit d'une nouvelle fonctionnalité de CSS3, elle n'est pas compatible avec les anciennes versions des navigateurs, comme IE678.

Recommandations d'apprentissage associées :tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!