jquery tabs problems

Question

私のウェブサイトに複数のタブ構造を作りたいです。

私は、このタブを使ってHTMLページとjavascriptページを作りました。

これは私のコードです：ヘッダーで ：

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

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

と私はスマートタブという名前のjqueryのタブを使用していました。あなたはGoogleスマートタブ。あなたは私が使用しているプラ​​グインを見ることができます。

ただし、問題は表示されません。私はページ上に2つ以上のタブを作る。タブは機能しません。 1つのタブのみが機能しており、最初のタブは機能しません。 1ページに複数のタブを作れますか？

ありがとうございます。

Answer 1

idsをjQueryに正しく割り当てていません。

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

開始が使用されている^によって示されるセレクタであなたは、このようなリンクIDがあるのでtabslinksで始まるIDを持つすべてのリンクターゲットにする：

を、それが機能するためにあなたのjQueryのコードは次のようになります。

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

また、classを使用して、タブビングするリンクをターゲットにすることもできます。

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