Comment faire UL Onglets avec uniquement du HTML CSS
À essayer de comprendre comment faire cela. J'ai le style, mais j'aimerais quelque chose à se produire après je clique sur les onglets. Je voudrais que le div avec l'onglet noms de classe pour afficher et masquer lorsque je clique sur les onglets. Je suis en supposant comment cela pourrait fonctionner. Maintenant, quand je clique sur les onglets ne se passe rien.
Voici mon code HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li><a href="#tab1">Description</a></li>
<li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
- Votre <a>s, ne pas aller n'importe où, est-ce par choix? Ou vous voulez dire que l'tab1 et tab2 classes d'id?
Vous devez vous connecter pour publier un commentaire.
Réponse Standard: vous ne pouvez pas. Il n'y a aucun moyen de le faire, à des fins purement HTML/CSS2, malheureusement. Nous pouvons faire des menus déroulants en CSS avec la
:hover
pseudo-classe, mais il n'y a pas d'équivalent pour les clics. Rechercher dans l'une de ces Javascript solutions.Réponse secrète: CSS3 [sorte de] la prend en charge. Mais vous devez créer des boutons radio [bizarre], et il n'est pas pris en charge dans IE7/8. Si vous l'osez...
Et si vous n'avez pas l'esprit à l'aide de Javascript, voici une solution rapide. Le reformatage de votre HTML, tout d'abord. Pas besoin de mettre
<h2>
s dans<div>
s, et l'utilisation<br />
pour les pauses—qu'est ce que ça existe. Aussi, j'ai changé l'onglet<div>
s à l'utilisation de l'id au lieu de classes. Si vous avez des identifiants uniques pour un élément, utilisezid
.Ne pas toucher à votre CSS.
Pour le Javascript, je vous recommande d'utiliser jQuery. Il vraiment simplifie les choses.
Tous vous avez besoin sont ces lignes de code:
Fondamentalement, une fois que la page est prête [chargé], pour chaque lien qui est un enfant de l'un des onglets
ul
. Joindre une fonction qui s'exécute à chaque fois que ce lien est cliqué. Lorsque le lien est cliqué, masquer tous les onglets dans le.pane
div. Ensuite, utilisez le lien dehref
de trouver le bon onglet div et de la montrer.violon: http://jsfiddle.net/uFALn/18/
En raison de la flottait
<li>
éléments de votre<ul>
élément est la hauteur nulle.Essayez d'ajouter
ul { overflow: auto; }
etdiv.content { clear: both; }
à votre CSSGrâce benesch. Il m'a aidé aussi.
On peut aussi ajouter des
return false
pour éviter que saccadés saut à l'ancre. Par exemple: