Фонд ZURB, программная переключение

Ответ 1

Возможное решение - назначить id ссылке вкладки и щелкнуть ее с помощью jQuery.

Учитывая следующий отрывок кода, обратите внимание на идентификатор, назначенный якорной ссылке...

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

Вы можете активировать эту ссылку, используя эту строку jQuery.

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

Ответ 2

Если вы даете первую вкладку и первый LI.active по умолчанию в 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");

}

Ответ 3

В версии 3.0 вы можете установить класс active на вкладке dl.tabs dd и ul.tabs-content li, чтобы переключить их. Вы можете сделать это в коде или в JavaScript.

Ответ 4

Это можно сделать без добавления идентификатора к каждому элементу списка и сохранения хеша в 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>

Ответ 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');
});

Это работает для меня...