Est-il possible d'avoir des onglets sans javascript

J'essaie d'avoir une boîte à onglets, et nous avons trouvé de nombreux tutoriels sur comment c'est fait avec du javascript pour basculer entre les onglets. Est-il de toute façon d'avoir des onglets sans javascript?

Vous devez être fou. Vous ne pouvez pas faire quelque chose d'intéressant sans Javascript. Geez. (Bien sûr, je suis facétieux.)
Et ce n'est pas vraiment une "réponse" de dire que Google a certains liens vers du contenu... Réponse le d*** question ou poster un commentaire.
double possible de onglet HTML de l'interface en utilisant uniquement CSS

OriginalL'auteur sameold | 2011-08-02

css javascript

13

Cette question est ancienne, mais se montre au top sur les résultats de Google. Il y a une archive de la mort html5rockstars.com démo ici:
https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

La même technique est couvert, sans doute mieux, ici:
http://www.sitepoint.com/css3-tabs-using-target-selector/

Ce qui se résume, c'est que vous utilisez le CSS3 :target sélecteur pour afficher n'importe quel onglet est sélectionné. Cela ne fonctionne que si il y a un seul ensemble d'onglets sur la page. Par exemple:
```
<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
<div id="tab1" class="tab-content">Content of first tab</div>
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>
```
Et puis dans votre feuille de style:
```
.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
}
```
Malheureusement, ce n'est pas parfait, pas le contenu de l'onglet affiche jusqu'à l'un des liens est cliqué (sauf si vous vous liez à page.html#tab1). Le second lien ci-dessus suggère quelque chose comme ce qui suit comme une solution à ce problème:
```
.tab-content {
    z-index: 0;
    background-color: white;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 300px;
}
.tab-content:first-child {
    z-index: 1;
}
.tab-content:target {
    z-index: 2;
}
```
C'est un peu hackish, et nécessite également un positionnement absolu.

Comme une alternative, si vous n'avez pas l'esprit d'avoir votre onglet par défaut sera le dernier dans le html (vous pouvez commander les liens comme vous l'aimez, bien sûr), vous pourriez faire ceci:
```
<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
    <div class="tab-folder">
    <div id="tab2" class="tab-content">Content of second tab</div>
    <div id="tab3" class="tab-content">Content of third tab</div>
    <div id="tab1" class="tab-content">Content of first tab</div>
</div>
```
CSS:
```
.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}
```
C'est sans doute la solution la plus propre et celui que je choisirais sur les autres, à moins que je soupçonne que beaucoup de gens serait de visiter ma page avec des CSS désactivée.

Avec votre dernière solution, parfois tous les onglets fin cachées. Cela se produit uniquement lors de l'affichage de données avec l'Ajax, cependant, je ne sais pas comment le résoudre.
Je ne peux pas imaginer pourquoi ce qui allait se passer comme un résultat d'une requête HTTP. Quelque chose doit être mal avec le code qui met à jour le DOM après la requête est terminée. Cet onglet solution est en pur CSS, il est donc peu probable que quoi que ce soit d'autre serait la cause de l'échec.

OriginalL'auteur krispy

Trouvé celui-ci, l'espoir de résoudre votre question

http://css-tricks.com/functional-css-tabs-revisited/

démo: http://css-tricks.com/examples/CSSTabs/radio.php

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           stuff
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

       <div class="content">
           stuff
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           stuff
       </div> 
   </div>

</div>

css

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

OriginalL'auteur chulian

0

De recherche pour le CSS onglets ou rendez-vous sur ici:

http://unraveled.com/publications/css_tabs/

EDIT: je suis l'auteur de ces onglets. Ils ont été une fois un excellent exemple de CSS dans la pratique, mais ils sont devenus cruellement obsolètes. Je recommande l'utilisation de plusieurs cadres actuels comme Bootstrap ou Foundation. - Joshua Kaufman

OriginalL'auteur Mrchief

Vous devez vous connecter pour publier un commentaire.