使用類選擇器的jQuery ui選項卡

在jquery ui演示中，爲了鏈接到某個選項卡，使用了id選擇器，它在鏈接中工作正常，因爲'＃'代表鏈接中的錨點。使用類選擇器的jQuery ui選項卡

但是我想創建多個tabpanels並使用類選擇器鏈接到正確的選項卡。

<div class="accordion"> 
    <h3>Product x</h3> 
    <div class="tabs"> 
     <ul> 
      <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url --> 
      <li><a href=".tabs-0">General product info</a></li> 
      <li><a href=".tabs-1">End user info</a></li> 
     </ul> 
     <div class="tabs-0"> 
      general info for product x. 
     </div> 
     <div class="tabs-1"> 
      end user info product x. 
     </div> 
    </div> 
</div> 
<div class="accordion"> 
    <h3>Product y</h3> 
    <div class="tabs"> 
     <ul> 
      <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url --> 
      <li><a href=".tabs-0">General info</a></li> 
      <li><a href=".tabs-1">End user info</a></li> 
     </ul> 
     <div class="tabs-0"> 
      general info for product y. 
     </div> 
     <div class="tabs-1"> 
      end user info product y. 
     </div> 
    </div> 
</div>

Here是我在jsfidlle嘗試和here是每個面板應該什麼樣子！

所以問題是如何通過類名鏈接到選項卡？

來源

2014-01-30 J. Rahmati

放置jquery代碼比html標記會更好！ –

jquery代碼工作正常，問題是鏈接.tabs-0和.tabs-1裏面的一個標籤！ –

是否有一個特定的原因，你不能分配一個ID的divs？ – Frankenscarf

<li><a href=".tabs-0">General product info</a></li> 
<li><a href=".tabs-1">End user info</a></li>

問題在於上面的代碼。您爲can't useclass超鏈接a標記。因此改爲id s。

來源

2014-01-30 08:57:05 Praveen

我已經知道這個問題，並提到在html評論！問題是如何使用類選擇器而不是ID的！？ –

@ J.Rahmati這就是答案所在。你不能這樣做（只有個人） – Praveen

我認爲，我搞砸了我想展示每個面板應該是什麼樣子的部分。我更新小提琴：http://jsfiddle.net/S74p8/6/ –

試試這個，你可以使用$(".tabs, .tab1")選擇器。每個部分都需要唯一的ID，以便能夠顯示或隱藏相應的部分，否則無法選擇！

<div class="accordion"> 
     <h3>Product x</h3> 
     <div class="tabs"> 
      <ul> 
       <li><a href="#tabs-0">General product info</a></li> 
       <li><a href="#tabs-1">End user info</a></li> 
      </ul> 
      <div id="tabs-0"> 
       general info for product x. 
      </div> 
      <div id="tabs-1"> 
       end user info product x. 
      </div> 
     </div> 
    </div> 

    <div class="accordion"> 
     <h3>Product y</h3> 
     <div class="tab1" > 
      <ul>    
       <li><a href="#tab1-0">General info</a></li> 
       <li><a href="#tab1-1">End user info</a></li> 
      </ul> 
      <div id="tab1-0" > 
       general info for product y. 
      </div> 
      <div id="tab1-1" > 
       end user info product y. 
      </div> 
     </div> 
    </div>

腳本：

$(".tabs, .tab1").tabs();

演示：http://jsfiddle.net/S74p8/4/

來源

2014-01-30 09:00:12

我不想手動設置ID！這就是爲什麼我想使用類而不是ID的 –

你可以genrate動態唯一身份證也對嗎？ –

是否有可能使用jquery生成？ –

在我想出了this結束：

HTML：

<div class="accordion"> 
    <h3>Product x</h3> 
    <div class="tabs"> 
     <ul> 
      <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url --> 
      <li><a href="" class="tabpanellink">General product info</a></li> 
      <li><a href="" class="tabpanellink">End user info</a></li> 
     </ul> 
     <div class="tabpanel"> 
      general info for product x. 
     </div> 
     <div class="tabpanel"> 
      end user info product x. 
     </div> 
    </div> 
</div> 
<div class="accordion"> 
    <h3>Product y</h3> 
    <div class="tabs"> 
     <ul> 
      <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url --> 
      <li><a href="" class="tabpanellink">General info</a></li> 
      <li><a href="" class="tabpanellink">End user info</a></li> 
     </ul> 
     <div class="tabpanel"> 
      general info for product y. 
     </div> 
     <div class="tabpanel"> 
      end user info product y. 
     </div> 
    </div> 
</div>

JQuery：

$(".tabpanellink").each(
    function(uniqueindex){ 
     $(this).attr('href', '#tab-' + uniqueindex); 
    } 
); 
$(".tabpanel").each(
    function(uniqueindex){ 
     $(this).attr('id', 'tab-' + uniqueindex); 
    } 
); 

$(".accordion").accordion({ 
    collapsible: true, 
    active: false 
}); 
$(".tabs").tabs();

來源

2014-01-30 09:54:30

使用類選擇器的jQuery ui選項卡

回答

相關問題