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

时间:2012-12-05 12:06:09

标签: javascript asp-classic zurb-foundation

我使用asp和基础,无论如何使用JS或ASP在标签之间切换?

Link(简单标签)。

6 个答案:

答案 0 :(得分:19)

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

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

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

你可以使用这行jQuery来激活这个链接。

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

答案 1 :(得分:4)

如果在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");

}

答案 2 :(得分: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>

答案 3 :(得分:2)

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

答案 4 :(得分:0)

试试这个:

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

这对我有用......

答案 5 :(得分:0)

在Foundation v5中,您可以使用toggle_active_tab函数:

// MAIN_WINDOW = my main JFrame
// SUBMENU = my pseudo submenu that overlaps on top of everything else
// ADDOBJECTS = actual JPanel with submenu-like buttons, positioned manually
// this is called from a "main" menu-like button
JPanel SUBMENU = (JPanel) MAIN_WINDOW.getGlassPane();
SUBMENU.setLayout(null);
SUBMENU.add(ADDOBJECTS);
SUBMENU.setVisible(true);