Problèmes d'onglets jquery

Question

Je souhaite créer deux onglets ou plus sur mon site Web. Je fais une page HTML et une page javascript avec ces onglets.

Ceci est mon code: Dans l'en-tête:

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#tabslinks').smartTab(); 
      $('#tabsrechts').smartTab(); 
     }); 
    </script> 

Et le code html

<div id="tabslinks" class="stContainer"> 
     <ul> 
      <li> 
       <a href="#tabslinks-1"> 
        <h2>Tab 1<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabslinks-2"> 
        <h2>Tab 2<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabslinks-3"> 
        <h2>Tab 3<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabslinks-4"> 
        <h2>Tab 4<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
     </ul> 

     <div id="tabslinks-1"> 
      <h2>Tab 1 Title</h2>  
      <p>Tab 1 Content here</p>   
     </div> 
     <div id="tabslinks-2"> 
      <h2>Tab 2 Title</h2>  
      <p>Tab 2 Content here</p>  
     </div>      
     <div id="tabslinks-3"> 
      <h2>Tab 3 Title</h2>  
      <p>Tab 3 Content here</p>         
     </div> 
     <div id="tabslinks-4"> 
      <h2>Tab 4 Title</h2>  
      <p>Tab 4 Content here</p> 
     </div> 
    </div> 


    <div id="tabsrechts" class="stContainer"> 
     <ul> 
      <li> 
       <a href="#tabsrechts-1"> 
        <h2>Tab 1<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabsrechts-2"> 
        <h2>Tab 2<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabsrechts-3">  
        <h2>Tab 3<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
      <li> 
       <a href="#tabsrechts-4"> 
        <h2>Tab 4<br /> 
        <small>Description</small></h2> 
       </a> 
      </li> 
     </ul> 

     <div id="tabsrechts-1"> 
      <h2>Tab 1 Title</h2>  
      <p>Tab 1 Content here</p>   
     </div> 
     <div id="tabsrechts-2"> 
      <h2>Tab 2 Title</h2>  
      <p>Tab 2 Content here</p>  
     </div>      
     <div id="tabsrechts-3"> 
      <h2>Tab 3 Title</h2>  
      <p>Tab 3 Content here</p>         
     </div> 
     <div id="tabsrechts-4"> 
      <h2>Tab 4 Title</h2>  
      <p>Tab 4 Content here</p> 
     </div> 
    </div> 

et moi l'onglet jquery nommé onglet intelligent. Lorsque vous google onglet intelligent. Vous pouvez voir le plugin que j'utilise.

Mais non, vous voyez le problème. Quand je fais plus de 1 onglets sur une page. Les onglets ne fonctionnent pas. Un seul onglet fonctionne et le premier onglet ne fonctionne pas. Est-ce que je peux faire plus d'un onglet sur une page?

Merci

Answer 1

Vous n'êtes pas correctement ids assignent jQuery. Votre code jQuery devrait ressembler à ceci pour que cela fonctionne:

$(document).ready(function(){ 
    $('a[id^="tabslinks"]').smartTab(); 
}); 

Le commence avec le sélecteur désigné par ^ y est utilisé pour cibler tous les liens ayant id qui commence par tabslinks puisque vous avez lien ids comme celui-ci:

 <a href="#tabslinks-1"> 
       <h2>Tab 1<br /> 

       <small>Description</small></h2> 
      </a> 
     </li> 
     <li> 
      <a href="#tabslinks-2"> 
       <h2>Tab 2<br /> 
       <small>Description</small></h2> 

      </a> 
     </li> 
     <li> 
      <a href="#tabslinks-3"> 
       <h2>Tab 3<br /> 
       <small>Description</small></h2> 
      </a> 
      ............. 

Vous pouvez également utiliser un class pour cibler les liens que vous souhaitez tabuler.

$(document).ready(function(){ 
    $('a.someClass').smartTab(); 
});