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?
InformationsquelleAutor Michiko | 2012-01-03