Onglet Simple Sections Javascript (pas les menus)

Question

Cela pourrait être la question la plus simple du jour. Je recherche la meilleure réponse pour tous les membres de la communauté, pas un effet de tabulation de base, mais un qui pourrait être évolutif, facile à mettre en œuvre et conforme aux normes.

Ce qui pourrait être une bonne et simple (compatible) façon d'accomplir avoir différentes sections avec javascript. Personnellement, je préfère Jquery, Mootools ou javascript.

Lorsque vous cliquez sur chaque lien, vous devez ouvrir la ligne ou div divisée par rapport au tableau, et non un menu contextuel. La section doit rester ouverte après avoir sélectionné les options de gauche.

Toute aide concernant les ressources ou la direction sera grandement appréciée.

Le formulaire aura un bouton de soumission commun avec toutes les options sélectionnées.

Answer 1

Ou vous pouvez utiliser un plug-in pré-existant: http://jsfiddle.net/oskar/VELCe/

Answer 2

Si je vous comprends bien, vous ne même pas besoin d'aucune javascript pour y parvenir.

Jetez un oeil à http://devinrolsen.com/wp-content/themes/typebased/demos/css/vertical-menu/WORKS.html pour un menu css 100% basé.

Il y a même un générateur disponible http://purecssmenu.com/

Answer 3

Il est plus facile Code onglet sans jQuery ou d'autres plug-ins.

Ajouter cette fonction sous balise script

<script type="text/javascript"> 
    function showTab(tabNumber) { 
     var tabIDs = ["tab1", "tab2"]; 
     var tabButtonIDs = ["tabButton1", "tabButton2"]; 
     for (var i = 0; i < tabIDs.length; i++) { 
     document.getElementById(tabIDs[i]).style.display = (tabNumber == i ? 'block' : 'none'); 
     document.getElementById(tabButtonIDs[i]).className = (tabNumber == i ? "active" : ""); 
     } 
    } 
</script> 

Ajouter ces styles à votre css

 <style type="text/css"> 
      #tabContainer 
      { 
       list-style: none; 
       margin: 0 0 5px 0; 
       padding: 0; 
       clear: both; 
       border-bottom: 1px solid #CCC; 
       height: 20px; 
       clear: both; 
      } 
      #tabContainer li 
      { 
       float:left; 
       margin-right: 7px; 
       text-align: center;   
      } 
      #tabContainer li a 
      { 
       background-color:transparent; 
       display: block; 
       height: 20px; 
       padding: 0 6px 0 6px; 
       background-color: white; 
       color: #666; 
       width: 80px; 
       text-decoration: none; 
       font-weight: bold; 
      } 
      .active 
      { 
       background-color: #DDD !important; 
      } 
     </style> 

Ajouter des boutons de l'onglet

<ul id="tabContainer"> 
     <li><a class="active" id="tabButton1" onclick="showTab(0)" href="javascript:void(0);">Option 1</a></li> 
     <li><a id="tabButton2" onclick="showTab(1)" href="javascript:void(0);">Option 2</a></li> 
    </ul> 

Ajouter du contenu onglet

<div id="tab1">Content 1</div> 
<div id="tab2" style="display:none;">Content 2</div>