web-dev-qa-db-fra.com

Comment créer une vue par onglets en HTML?

En cliquant sur l'onglet A, affichez le contenu de l'onglet A. Cliquez sur l'onglet B, affichez le contenu de l'onglet B, et ainsi de suite.

Quelle est la manière la plus simple et la plus compatible de créer un extrait de code HTML?

Je ne veux pas utiliser de bibliothèques ici, donc aucune de jQuery ou aucune autre bibliothèque.

htmltabbed-view
15
omg

Si vous souhaitez lancer votre propre contrôle d'onglet, vous pouvez faire quelque chose comme ceci:

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
      ...
    </ul>
    <div id="tabCtrl">
      <div id="page1" style="display: block;">Page 1</div>
      <div id="page2" style="display: none;">Page 2</div>
      ...
    </div>
  </body>
</html>
30
Jacob

Voici un liste des différents types d'onglets plus des tutoriels sur la façon de les construire

3
Lark

Si vous souhaitez implémenter votre propre vue par onglets, procédez comme suit:

<html>
    <head>
        <style>
            .tab {
            display:none;
            }
        </style>

        <script type="text/javascript">
          function initTabView(){
            var x = document.getElementsByClassName('tab-view')
            for(var i=0; i < x.length; i++) {
              x[i].onclick = displayTab;
            }

            var prevViewedTab = null;

            function displayTab(e) {
            var idOfTabToDisplay = this.getAttribute("data-tab")

            if(prevViewedTab) {
              prevViewedTab.style.display = 'none';
            }

            var tabToDisplay = document.getElementById(idOfTabToDisplay);
              tabToDisplay.style.display = 'block';
              prevViewedTab = tabToDisplay;
            }

            var defaultTab = document.getElementsByClassName('default-tab')
              if (defaultTab.length) {
                defaultTab[0].style.display = 'block';
                prevViewedTab = defaultTab[0];
              }
          }
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a data-tab="tab1" class="tab-view">Tab 1</a>
            </li>
            <li>
                <a data-tab="tab2" class="tab-view">Tab 2</a>
            </li>
            <li>
                <a data-tab="tab3" class="tab-view">Tab 3</a>
            </li>
            <li>
                <a data-tab="tab4" class="tab-view">Tab 4</a>
            </li>
        </ul>
        <div id="tabCtrl">
            <div class="tab default-tab" id="tab1">This is Tab 1</div>
            <div class="tab" id="tab2">This is Tab 2</div>
            <div class="tab" id="tab3">This is Tab 3</div>
            <div class="tab" id="tab4">This is Tab 4</div>
        </div>

        <script>
            initTabView();
        </script>
    </body>
</html>

A jsFiddle est disponible ici .

2
naren

TabTastic est un bon guide - il est accessible et (lorsque JavaScript n'est pas disponible) échoue très gracieusement.

2
Quentin

Jetez un œil à un exemple tel que this (avec la permission d'une recherche Google pour 'onglet vue javascript').

Vous pouvez évidemment l'utiliser avec un peu de personnalisation, mais il est instructif de le démonter et de déterminer ce qu'il fait. Il s'agit essentiellement d'activer ou de désactiver <div> en utilisant le style display et en le définissant sur block ou none

1
Brian Agnew

Le widget onglets dans jQuery UI est facile à utiliser: http://jqueryui.com/demos/tabs/ .

Le widget onglets jQuery fonctionne entièrement du côté du navigateur - le contenu de tous les onglets est envoyé à chaque demande, ou vous pouvez écrire du code JavaScript qui utilise Ajax pour charger le contenu de l'onglet de manière dynamique.

Mais cela pourrait ne pas convenir à votre utilisation. Considérez si vous avez besoin de contrôler les onglets côté serveur (c'est-à-dire qu'un clic sur un onglet envoie une nouvelle demande de page au serveur - le serveur construit du HTML qui a l'apparence visuelle des onglets).

0
codeape

Si vous êtes prêt à utiliser JavaScript, onglet jQuery est plutôt sympa.

0
Shane Fulmer

Si "simple et compatible" sont vos deux seuls critères, je vous suggère le plugin jQuery UI Tabs . Cross-browser, et un jeu d'enfant à mettre en œuvre.

0
Mark Hurd

Selon vos ambitions, il pourrait simplement s'agir d'une liste non ordonnée et d'un certain nombre de <div> (Contenu de l'onglet). Ensuite, un simple JavaScript pourrait - au moyen de getElementById() - définir la propriété d'affichage pour tous les <div> S: none pour tous sauf le courant.

Alternativement, vous pouvez jeter un œil à this .

Edit : Pas le seul lien vers le site jQuery, il semble :)

0
jensgram