jquery選項卡問題

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的標籤。當你谷歌智能選項卡。你可以看到我使用的插件。

但是，沒有你看到這個問題。當我在頁面上製作多個標籤頁時。這些標籤不起作用。只有一個標籤正在工作，第一個標籤不起作用。我可以在1頁上製作多個標籤嗎？

謝謝

Answer 1

您沒有正確地爲jQuery分配ids。 jQuery代碼應該是這樣的，它的工作：

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

的開始與選擇由^目前使用的是表示，以靶向具有ID，因爲你有鏈路ID這樣，與tabslinks開頭的所有鏈接：

 <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來定位要製作tabbify的鏈接。

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