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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
Le code le plus critique
Le code est le suivant :
1 2 3 |
|
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!