javascript ZURB Foundation，以编程方式切换选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13722893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ZURB Foundation, switching tab programmatically
提问by boh
回答by Jesse Fisher
A possible solution is to assign an id to the tab link and click it using jQuery.
一种可能的解决方案是为选项卡链接分配一个 id 并使用 jQuery 单击它。
Given the following code excerpt, notice the id assigned to the anchor link...
鉴于以下代码摘录，请注意分配给锚链接的 id...
<dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd>
You could activate this link using this line of jQuery.
您可以使用这行 jQuery 激活此链接。
$("#tabId").click();
回答by Mal
If you give the first tab and the first LI .active by default in the HTML,
如果您在 HTML 中默认提供第一个选项卡和第一个 LI .active，
<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>
Then you can change the tab in javascript,
然后你可以在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");
}
回答by Eric Muyser
You can do this without adding an ID to each list item, and keeping the hash in the URL location.
您无需为每个列表项添加 ID 并将哈希保留在 URL 位置即可执行此操作。
Let's say you have this code:
假设您有以下代码：
<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>
Then you can do this anywhere on the page:
然后您可以在页面上的任何位置执行此操作：
<a href="#feedback" onclick="$('#my-menu a[href=\'#feedback\']').click()">Feedback</a>
回答by Greg Benedict
In version 3.0 you can set a class of activeon the tab dl.tabs ddand the ul.tabs-content lito switch them. You can do that in code or in JavaScript.
在 3.0 版本中，您可以active在选项卡上设置一个类dl.tabs dd并ul.tabs-content li切换它们。您可以在代码或 JavaScript 中执行此操作。
回答by Mike
try this:
试试这个：
$('#yourTabsContainer').on('click', '.yourNextButton', function(event) {
event.preventDefault();
$('.active').removeClass('active').next().addClass('active');
});
and this previous button(if you need)
和这个上一个按钮（如果你需要）
$('#yourTabsContainer').on('click', '.yourPreviousButton', function(event) {
event.preventDefault();
$('.active').removeClass('active').prev().addClass('active');
});
It's working for me...
它对我有用...
回答by lptn
In foundation v5 you can use toggle_active_tab function:
在 Foundation v5 中，您可以使用 toggle_active_tab 函数：
var $secondTab = $('ul.tabs > li:nth-child(2)');
Foundation.libs.tab.toggle_active_tab($secondTab, 'optional_location_hash')