ZURB基金会，切换标签编程(ZURB Foundation, switching tab prog

使用ASP和基础IM，反正是有一个选项卡之间进行切换到另一个使用JS或ASP？

链接 （简单标签）。

Answer 1:

一个可能的解决方案是一个id分配给标签链接并点击使用jQuery。

考虑下面的代码片段，发现分配给锚链接的ID ...

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

你可以使用激活此行的jQuery的这个环节。

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

Answer 2:

如果你给第一个标签和第一个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 3:

你可以这样做，而不在URL位置添加一个ID给每个列表项，并保持哈希值。

比方说，你有这样的代码：

  <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:

在3.0版本中，你可以设置一个类的active对标签dl.tabs dd和ul.tabs-content li他们进行切换。 你可以在代码或在JavaScript中。

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');
});

它的工作对我来说...

Answer 6:

在基础V5可以使用toggle_active_tab功能：

 var $secondTab = $('ul.tabs > li:nth-child(2)'); Foundation.libs.tab.toggle_active_tab($secondTab, 'optional_location_hash') 

文章来源: ZURB Foundation, switching tab programmatically