Активация вкладки Foundation 6 по нескольким ссылкам

Есть ли способ вывести вкладку из второй ссылки на эту вкладку?

У меня есть две вкладки, ссылки внутри заголовка вкладок работают, но я хочу включить еще одну ссылку на вкладку 2 в область панели вкладок вкладки 1 - и наоборот.


person teamsiems    schedule 19.04.2016    source источник


Ответы (1)


Вы можете использовать небольшой javascript. Добавьте этот якорь к содержимому вкладки 1, чтобы открыть вкладку 2.

<a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a>

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

<div class="row">
        <div class="small-12 columns">
            <ul class="tabs" data-tabs id="example-tabs">
                <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
                <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
            </ul>
        </div>

        <div class="tabs-content" data-tabs-content="example-tabs">
            <div class="tabs-panel is-active" id="panel1">
                <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a></p>
                <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
            </div>
            <div class="tabs-panel" id="panel2">
                <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel1');">Open Tab 1</a></p>
                <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
            </div>
        </div>
    </div>

Документ Zurb Foundation 6 по методу selectTab: http://foundation.zurb.com/sites/docs/tabs.html#selecttab

person Chris O    schedule 20.04.2016