Изменить 1: У меня есть время, чтобы изучить, как работает Фонд. Поэтому я могу сделать более образованное решение. Моя первоначальная идея заключалась в том, чтобы имитировать эффект нажатия на элементы на уровне css.

Это не означает, что старое решение не работает. На самом деле конечный результат обоих решений в том же. Я протестировал как старое, так и новое решение на копии HTML вашего сайта.

Также воспользовался возможностью, чтобы добавить некоторые разъяснения.

Изменить 2: я добавил контроль над историей броузера. Это означает, что код изменит URL-адрес, который пользователь видит и будет правильно обрабатывать кнопку "Назад", без перезагрузки страницы.

Дорожная карта

Вы должны сделать это:

1. Добавление идентификатора для обработки вкладок.
2. Создание функции JavaScript selectTab для переключения между ними. в зависимости от выбранного вами решения.
3. Создание функции JavaScript navigateTab, которая вызовет selectTab а также обновит историю браузера.
4. Добавление обработчиков событий кликов.
5. Обращайтесь с кнопкой "Назад".

Итак, позвольте получить общие части:

---

Добавление идентификатора для обработки вкладок

HTML:

<dl id="LOOK_MY_ID" class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
    <dd><a href="#panel2-2">Tab 2</a></dd>
    <dd><a href="#panel2-3">Tab 3</a></dd>
    <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="panel2-1">
        <p>First panel content goes here...</p>
    </div>
    <div class="content" id="panel2-2">
        <p>Second panel content goes here...</p>
    </div>
    <div class="content" id="panel2-3">
        <p>Third panel content goes here...</p>
    </div>
    <div class="content" id="panel2-4">
        <p>Fourth panel content goes here...</p>
    </div>
</div>

Примечание: это основано на HTML, представленном в примере вкладок Foundation. В коде вы добавили бы id в div, у которого есть класс corporation-frame.

---

Создание вспомогательной функции

Цель вспомогательной функции состоит в том, чтобы упростить обработчики событий щелчка, абстрагируя код, чтобы изменить URL-адрес браузера. Мы получаем это как показано ниже.

JavaScript:

function navigateTab(event)
{
    var url = $(event.target).attr('href');
    var target = url.split('#')[1];
    if (target.substr(0, 3) == 'tab')
    {
        var state = {tab: target.substr(3)};
        selectTab("LOOK_MY_ID", state.tab); //<-- change the tab
        history.pushState(state, null, url); //<-- change the url
        event.preventDefault();
    }
}

Как вы можете видеть, это использует event, причина в том, что мы будем использовать эту функцию непосредственно как обработчик события клика. Кроме того, вкладка, которую нужно выбрать, и URL для ввода, берутся из атрибута href гиперссылки, которая была нажата.

Этот метод также позволяет безопасно добавлять обработчик события клика ко всем ссылкам сразу.

Примечание: мы меняем URL-адрес, используя API истории HTML5.

---

Добавление обработчиков событий

Вам нужно добавить обработчик событий к вашим ссылкам (Foundation добавьте их на вкладки за кулисами, мы будем имитировать это для ваших меню).

Есть два способа добавить эти обработчики событий...

Способ A)

Выберите свои привязки и добавьте обработчик событий через JavaScript:

$('ul.dropdown a').on("click", navigateTab);

Это не получается проще.

Примечание. Не забудьте использовать правильный селектор, чтобы выбрать гиперссылки из меню. Также вам может понадобиться (если добавить скрипт в верхней части страницы), чтобы добавить это с ready, как это:

$(document).ready(
    function()
    {
        $('ul.dropdown a').on("click", navigateTab);
    }
);

Способ B)

Добавьте обработчик событий непосредственно в HTML:

HTML:

<a href="#tab3" onclick="navigateTab(event)">Tab 3</a>

Примечание 1: Если JavaScript отключен в обработчике, он не работает, он заставит страницу перейти к содержимому (если они видны). Это лучшее, что можно получить без JavaScript.

---

Обращение с кнопкой "Назад"

В предыдущем коде мы не только меняем URL-адрес в браузере, но также добавляем запись в историю навигации на странице... так что происходит, когда пользователь нажимает на кнопку? Ну, мы будем обращаться с обратной кнопкой, снова используя API истории HTML5.

Чтобы обработать это, мы добавим этот код:

window.onpopstate = function(event)
{
    selectTab("LOOK_MY_ID", event.state.tab); //<-- change the tab
};

Вот почему мы не должны менять URL-адрес от selectTab, потому что, если мы это сделаем... мы не сможем вернуться!

note: этот код не только заботится о кнопке "Назад", но и о любой навигации в истории браузера внутри страницы.

---

НОВОЕ РЕШЕНИЕ

---

Создание функции JavaScript для переключения между ними

Функция selectTab будет реализована:

1. Имитировать, что делает Фонд (на основе фактического кода из Фонда):

JavaScript:

function selectTab(id, tab)
{
    // activate only the right tab:
    var tab = $("#" + id + " > dl > dd:nth-child(" + tab + ")");
    var a = $("a", tab);
    target = $('#' + a.attr("href").split('#')[1]);
    siblings = tab.siblings();
    settings = tab.closest('[data-tab]').data('tab-init');

    tab.addClass(settings.active_class);
    siblings.removeClass(settings.active_class);
    target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
}

---

СТАРЫЙ РЕШЕНИЕ

---

Создание функции JavaScript для переключения между ними

Функция selectTab будет реализована:

1. Сделать вкладку, которую вы хотите активировать
2. Сделайте активный контент активным
3. Сделать все остальные вкладки неактивными
4. Сделать все другое содержимое неактивным

JavaScript:

function selectTab(id, tab)
{
    // activate only the right tab:
    $("#" + id + " > dl").children().each
    (
        function(index, element)
        {
            if (index == tab)
            {
                $(element).addClass("active");
            }
            else
            {
                $(element).removeClass("active");
            }
        }
    );
    // activate only the right content:
    $("#" + id + " > div").children().each
    (
        function(index, element)
        {
            if (index == tab)
            {
                $(element).addClass("active");
            }
            else
            {
                $(element).removeClass("active");
            }
        }
    );
}