ZURB基金會，以編程方式切換選項卡

Question

即時通訊與基金會，有無論如何使用JS或ASP切換到另一個選項卡？ （簡單選項卡）

Link（簡單標籤）。

Answer 1

一個可能的解決方案是爲標籤鏈接分配一個id並使用jQuery進行點擊。

考慮下面的代碼片段，發現分配給錨鏈接的ID ...

<dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd> 

你可以激活使用此行的jQuery的這個環節。

$("#tabId").click(); 

Answer 2

在3.0版本中，你可以在標籤上dl.tabs dd設置一類active和ul.tabs-content li他們進行切換。你可以在代碼或JavaScript中做到這一點。

Answer 3

您可以在不爲每個列表項添加ID的情況下執行此操作，並將散列保留在URL位置中。

比方說，你有這樣的代碼：

<div id="my-menu" class="menu"> 
    <ul class="vertical tabs"> 
     <li class="active"><a href="#overview">Overview</a></li> 
     <li><a href="#feedback">Feedback</a></li> 
    </ul> 
    </div> 

然後，你可以做網頁上這樣的任何地方：

<a href="#feedback" onclick="$('#my-menu a[href=\'#feedback\']').click()">Feedback</a> 

Answer 4

如果你給第一個選項卡，在默認情況下，第一個LI。主動在HTML，

<div id="#TheTabs" class="twelve columns"> 

    <dl class="nice contained tabs"> 
     <dd><a href="#FirstTab" class="active">First Tab</a></dd> 
     <dd><a href="#SecondTab">Second Tab</a></dd> 
    </dl> 

    <ul class="nice contained tabs-content"> 
     <li id="FirstTabLI" class="active"> 
      <div class="row"> 
       <div class="twelve columns"> 
       </div> 
      </div> 
     </li> 
     <li id="SecondTabLI"> 
      <div class="row"> 
       <div class="twelve columns"> 
       </div> 
      </div> 
     </li> 
    </ul> 

</div> 

然後你就可以在JavaScript更改選項卡，

if (activeTab == 2) { 

    // Clear tab 1 
    $('#TheTabs dl dd a[href="#FirstTab"]').removeClass("active"); 
    $('#FirstTabLI').removeClass("active"); 

    // Select tab 2 
    $('#TheTabs dl dd a[href="#SecondTab"]').addClass("active"); 
    $('#SecondTabLI').addClass("active"); 

} 

Answer 5

試試這個：

$('#yourTabsContainer').on('click', '.yourNextButton', function(event) { 
     event.preventDefault(); 
     $('.active').removeClass('active').next().addClass('active'); 
}); 

，這後退按鈕（如果需要）

$('#yourTabsContainer').on('click', '.yourPreviousButton', function(event) { 
     event.preventDefault(); 
     $('.active').removeClass('active').prev().addClass('active'); 
}); 

它的工作對我來說...