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

Question

我正在使用ASP与基础，有没有任何方式切换到一个标签之间使用JS或asp的另一个？

Link (简单选项卡)。

Answer 1

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

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

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

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

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

Answer 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");

}

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>