Как открыть вкладку с вкладками пользовательского интерфейса jQuery из ссылки за пределами div?

Это может быть немного сложно объяснить, но я постараюсь изо всех сил. У меня есть страница продукта с двумя вкладками, полным описанием и видео. Они выполняются с помощью вкладок пользовательского интерфейса jQuery.

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

Если я загружаю страницу как site.com/product#video, она загружает правильную вкладку... но когда вкладка не активна, и я использую ссылку вне div #tab (например: Видео), он ничего не делает.

Как я могу получить ссылку, чтобы открыть вкладку, если она не содержится в #tab div?

CODE

Этот код находится за пределами вкладок и ему нужно открыть вкладку #video

<a href="#video">Open Video Tab</a>

Код вкладок

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover"><a href="#description">Full Description</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#video">Video</a></li>
</ul>
<div class="product-collateral">
    <div class="box-collateral box-description">
        <div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
           Content
        </div>
        <div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <h2 class="video">Video Content</h2>
        </div>
    </div>
</div>
</div>

Ответ 1

Что для меня работало:

Html

<a href="#description" class="open-tab">Open Description Tab</a>
<a href="#video" class="open-tab">Open Video Tab</a>   

<div id="tabs">
    <ul>
        <li>
            <a href="#description">Full description</a>
        </li>
        <li>
            <a href="#video">Video content</a>
        </li>
    </ul>

    <div class="product-collateral">
        <div class="box-collateral box-description">
            <div id="description">
                Content
            </div>
            <div id="video">
                <h2 class="video">Video Content</h2>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function () {
    $('#tabs').tabs();

    $('.open-tab').click(function (event) {
        var tab = $(this).attr('href');
        $('#tabs').tabs('select', tab);
    });
});

Итак, что это значит, это ссылка на вкладки описания и видео, которые выбираются при нажатии ссылки.

Из здесь мы можем видеть, что при выборе конкретной вкладки мы можем использовать либо индекс на основе нуля, либо фрагмент href, который указывает на вкладку, которую мы хотим дисплей.

Вот почему атрибуты href элементов a совпадают с идентификаторами элементов div - при щелчке по его фрагменту href затем используется для установки выбранной вкладки.

Обновление для jQuery UI 1.11

По мере развития jQuery UI, так что у него есть API для настройки активной вкладки. Начиная с jQuery UI 1.11, следующий код выберет активную вкладку:

//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);

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

Теперь нам нужен индекс, который можно использовать. Один из подходов:

$('.open-tab').click(function (event) {
    var index = $("selector-of-clicked-tab").index();
    $('#tabs').tabs("option", "active", index);
});

Другим является использование атрибутов HTML5 data-:

<a href="#description" class="open-tab" data-tab-index="0">Open Description Tab</a>
<a href="#video" class="open-tab" data-tab-index="1">Open Video Tab</a>

Таким образом, вы можете сделать это при обработке щелчка по этим ссылкам:

$('.open-tab').click(function (event) {
    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
});

Ответ 2

использовать jQuery:

$( "#tabs" ).tabs({ active: tabNumber });

Помните, что индексация начинается с 0

Ответ 3

Используя jquery, привяжите событие click к вашей ссылке, которая открывает вкладку, которую вы хотите.

$('#tabopenlink').click(function() {
    $('#tabs').tabs({active: tabidx});
});

Ответ 4

Я использую мини-плагин.

    (function($) {
    $.fn.tabremote = function(options) {

          var settings = $.extend({
           panel: "#tabs",
           to: "data-to",
        }, options );

        $this=$(this);
        $panel=$(settings.panel);

    $this.click(function(){
                if($(this).attr("href"))
                    {var tos=$(this).attr("href");}
                else
                    {var tos=$(this).attr(settings.to);}

                to=tos.match(/\d/g);
    $panel.tabs({active: to-1});        
    return false;   
    });


        return this;
    }
})(jQuery);

Открывает вкладку с помощью href или любого элемента.

Панель

id должна содержать номер панели. Пример (1-вкладки, вкладки-2,...) Плагин вычитает 1 и открывает панель. Вкладки (активные, (число id -1))

Использование

$("button.href").tabremote({panel:"#tabs",to:"data-href"});

панель: "# tabs" // панель контейнера

to: "data-href" // имя атрибута со значением

Ответ 5

function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}

Ответ 6

Если вы используете twitter bootstrap вместо jquery ui, это будет очень просто. Просто добавьте data-toggle="tab" и поместите ссылку туда, где вы хотите на странице:

 <a href="#video" data-toggle="tab">Open Video Tab</a>