ZURB Foundation, switching tab programmatically

Question

Im using asp with foundation, is there anyway to switch between a tab to another using JS or ASP?

Link (Simple tab).

Answer 1

A possible solution is to assign an id to the tab link and click it using jQuery.

Given the following code excerpt, notice the id assigned to the anchor link...

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

You could activate this link using this line of jQuery.

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

Answer 2

If you give the first tab and the first LI .active by default in the 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>

Then you can change the tab in 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

You can do this without adding an ID to each list item, and keeping the hash in the URL location.

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>

Answer 4

In version 3.0 you can set a class of active on the tab dl.tabs dd and the ul.tabs-content li to switch them. You can do that in code or in JavaScript.