ZURB Foundation，以编程方式切换选项卡答案

【问题标题】：ZURB Foundation, switching tab programmaticallyZURB Foundation，以编程方式切换选项卡
【发布时间】：2012-12-05 12:06:08
【问题描述】：

我在使用 asp 和基础，有没有使用 JS 或 ASP 在一个选项卡之间切换到另一个选项卡？

Link（简单标签）。

【问题讨论】：

你的意思是从后面的代码中切换标签吗？（服务器端）

标签： javascript asp-classic zurb-foundation

【解决方案1】：

一种可能的解决方案是为选项卡链接分配一个 id 并使用 jQuery 单击它。

鉴于以下代码摘录，请注意分配给锚链接的 id...

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

您可以使用这行 jQuery 激活此链接。

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

【讨论】：

【解决方案2】：

如果你在 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>

然后你可以在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");

}

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

在 3.0 版中，您可以在标签 dl.tabs dd 和 ul.tabs-content li 上设置类 active 来切换它们。您可以在代码或 JavaScript 中执行此操作。

【讨论】：

【解决方案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');
});

它对我有用...

【讨论】：

【解决方案6】：

在foundation v5中你可以使用toggle_active_tab函数：

var $secondTab = $('ul.tabs > li:nth-child(2)');

Foundation.libs.tab.toggle_active_tab($secondTab, 'optional_location_hash')

【讨论】：