Comment puis-je créer un onglet en HTML?

Lorsque l'on clique sur Un onglet, d'afficher le contenu de l'onglet A. Cliquez sur l'onglet B, afficher le contenu de l'onglet B, et ainsi de suite.

Ce qui est le plus simple et compatible avec la construction d'un fragment de code HTML?

Je ne veux pas utiliser les bibliothèques ici, de sorte qu'aucun de jQuery ou toutes les autres bibliothèques.

source d'informationauteur omg

  1. 27

    Si vous souhaitez annuler votre propre contrôle onglet, vous pourriez 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>
  2. 3

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

  3. 2

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

  4. 2

    Si vous souhaitez mettre en place votre propre onglet affichage, il suffit de faire comme ceci:

    <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>

    Un jsFiddle est disponible ici.

  5. 1

    Prendre un coup d'oeil à un exemple comme cette (avec l'aimable autorisation d'une recherche sur Google pour 'affichage des onglets javascript').

    Vous pouvez évidemment utiliser cela avec un peu de personnalisation, mais il est instructif de le prendre à part et de déterminer ce qu'il fait. C'est essentiellement l'activation ou la désactivation <div> à l'aide de la display style et la valeur block ou none

  6. 0

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

  7. 0

    En fonction de vos ambitions, il pourrait simplement être une question d'une liste non ordonnée et un certain nombre de <div>s (onglet contenu). Alors qu'un simple JavaScript pourrait - par le biais de getElementById() - définissez la propriété d'affichage pour tous les <div>s: none pour tous à l'exception de l'actuel.

    Sinon, vous pourriez avoir un coup d'oeil à cette.

    Modifier: Pas le seul à relier à la jQuery site, il me semble 🙂

  8. 0

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

    Les onglets jQuery widget fonctionne complètement à côté navigateur de contenu pour tous les onglets sont envoyés à chaque requête, ou vous pouvez écrire du code JavaScript qui utilise Ajax pour charger l'onglet contenu dynamiquement.

    Mais il pourrait ne pas être approprié pour votre usage. Envisager si vous avez besoin de contrôler les onglets côté serveur (qui est, un clic sur un onglet envoie une nouvelle demande de page sur le serveur - le serveur constructions HTML qui a l'apparence visuelle des onglets).

  9. 0

    Si vous êtes ouvert à l'aide de JavaScript, jQuery onglet est assez agréable.