jquery: comment relier la barre de menus aux onglets Les

Question

J'ai une barre de menus et onglets du code comme ci-dessous:

<div id="menu"> 
     <ul> 
      <li><a href="#"><span>Inspection</span></a></li> 
      <ul> 
       <li><a href="#"><span>show tabs1</span></a></li> 
       <li><a href="#"><span>show tabs2</span></a></li> 
      </ul> 
     </ul> 
    </div>  

    <div id="tabs"> 
      <ul> 
       <li><a href="#tabs1">Inspection Report</a></li> 
       <li><a href="#tabs2">Input Data</a></li> 
      </ul> 
     <div id="tabs1"> 
      bla bla bla 
     </div> 
     <div id="tabs2"> 
      blah blah blah 
     </div> 
    </div> 

j'ai utiliser ce code ci-dessous pour les onglets sélectionnés. mais après avoir cliqué sur show tabs1, montrent en fait tabs2:

<script> 
     $(document).ready(function(){ 
       $("#Tabs").tabs(); 
       $("#menu ul li a").each(function(index){ 
         $(this).click(function(){ 
            $("#Tabs").tabs("select",index); 
            }); 
         }); 
      }); 
</script> 

Answer 1

Maintenant que vous avez finalement fourni suffisamment d'informations, il est plus facile de vous aider à ...

Modifier votre javascript pour ce qui suit, il utilise toujours la méthode select des onglets jQuery

$(function() { 
    $("#tabs").tabs(); 
    $("#menu a:not(:first)").each(function(index){ 
     $(this).click(function() { 
      $("#tabs").tabs("select",index); 
      return false; 
     }); 
    }); 
}); 

Démo: http://jsfiddle.net/LdDGG

---

Sinon, si vous prévoyez d'ajouter plus de a éléments dans votre #menu, vous devez ajouter les ID soit aux a éléments ou ul, comme dans cette démo: http://jsfiddle.net/LdDGG/1/

Answer 2

Votre question est pas très claire, mais peut-être la méthode select est ce que vous cherchez. Il effectue les opérations suivantes:

Sélectionnez un onglet, comme si elle était cliqué. Le second argument est l'indice de base zéro de l'onglet à sélectionner ou le sélecteur identifiant du panneau de la languette est associée à (href identificateur de fragment de l'onglet, par exemple hachage, les points à l'id du panneau).

également de la documentation:

[Comment] ... sélectionner un onglet à partir d'un lien texte au lieu de cliquer sur un onglet lui-même

var $tabs = $('#example').tabs(); // first tab selected 

$('#my-text-link').click(function() { // bind click event to link 
     $tabs.tabs('select', 2); // switch to third tab 
     return false; 
}); 

est ici un Démonstration de la façon dont cela fonctionne:

Answer 3

Nous appellerons votre menu le "onglet con sole "et votre conteneur principal le" onglet ".

Disons que votre code HTML de la console onglet ressemble à ceci:

<ul id="tab_console"> 
    <li id="first"><a href="#">My First Page</a></li> 
    <li id="second"><a href="#">My Second Page</a></li> 
    <li id="third"><a href="#">My Third Page</a></li> 
</ul> 

... et votre lookw de volet de l'onglet comme ceci:

<div id="tab_pane"> 
    <div id="page_first"></div> 
    <div id="page_second"></div> 
    <div id="page_this"></div> 
</div> 

Vous auriez besoin de cacher les différents contenu du volet onglet , donc ils ne montrent pas tous à la fois. Vous pouvez le faire avec CSS:

#tab_pane div {display: none;} 

Maintenant, nous avons besoin d'un script pour faire fonctionner le tout:

$(document).ready(function(){     // fires when browser loads your html 
    $('#tab_console > li').click(function() { // fires when a tab is clicked 
     $('#tab_pane > div').hide();    // hides all tab contents 
     $('#tab_pane > #page_' + $(this).attr('id')).show(); // show the selected tab 
    }); 

    $('#tab_pane > li#page_first').show();  // load your default tab 
});