Как активировать вкладку в JavaScript с помощью якоря - PullRequest
Новая
       167

Как активировать вкладку в JavaScript с помощью якоря

1 голос
/ 17 января 2012

Я хочу активировать на одной странице вкладку (все вкладки имеют ID как #tab1, #tab2, #tab3 ...), когда я нажимаю #url ...
Например, активируйте #tab3, когда я нажимаю на ссылку типа href="#tab3".

Я думаю, что это очень легко, но не для меня .. Вот HTML-код: 

<div class="tabs p3">
    <ul class="nav">
        <li class="selected"><a href="#tab1">popular</a></li>
        <li class=""><a href="#tab2">featured</a></li>
    </ul>
    <div id="tab1" class="tab-content" style="display: block; ">
        <div class="inner">
            <p>Lorem ipsum dolor elit.</p>
        </div>
    </div>
    <div id="tab2" class="tab-content" style="display: none; ">
        <div class="inner">
            <p>Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.</p>
        </div>
    </div>
</div>

Итак, если я нажму на <a href="#tab2">, #tab2 активируется. Нет проблем. Но если я вставлю ссылку как <a href="#tab2"> где-нибудь на моей странице, эта ссылка не активирует эту вкладку ...
Наверное, мне нужно создать привязку типа <a name="tab2"> на моем #tab2? Но это не работает.

Вот код JavaScript, который я использую для вкладок: 

$(function(){
    tabs.init();
}); 
tabs = {
    init : function(){
        $('.tabs').each(function(){
            $(this).find('.tab-content').hide();
            $($(this).find('ul.nav .selected a').attr('href')).fadeIn(300);
            $(this).find('ul.nav a').click(function(){
                $(this).parents('.tabs').find('.tab-content').hide();
                $($(this).attr('href')).fadeIn(300);
                $(this).parent().addClass('selected').siblings().removeClass('selected');
                return false;
            });
        });
    }
}

1 Ответ

0 голосов
/ 18 января 2012

Я немного лучше понимаю, что вам нужно.

Хорошо, если вы хотите, чтобы ссылки внутри содержали вкладки, чтобы они указывали на другие вкладки той же группы. Вы можете сделать следующее: 

// find all <a> with href start with a '#' in tab-content
$tab.find('.tab-content a[href^="#"]').click(function(e) {

    $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click');

    return false;
});

Вот полный код, немного оптимизированный (проверьте комментарии): 

    $('.tabs').each(function() {

        // save $(this) (the .tabs container) for re-use
        var $tab = $(this);

        $tab.find('.tab-content').hide();
        $($tab.find('.nav .selected a').attr('href')).fadeIn(300);

        $tab.find('.nav a').click(function(){

            // save $(this) (the clicked link) for re-use
            var $a = $(this);

            $a.parents('.tabs').find('.tab-content').hide();
            $($a.attr('href')).fadeIn(300);
            $a.parent().addClass('selected').siblings().removeClass('selected');

            return false;

        });

        // find all <a> with href start with a '#' in tab-content
        $tab.find('.tab-content a[href^="#"]').click(function(e) {

            $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click');

            return false;
        });
    });

DEMO

Если вам нужна ссылка в любом месте на странице, чтобы открыть определенную вкладку любой группы вкладок, это более сложный вопрос.

Почему бы вам не обратиться к уже существующему полнофункциональному плагину, чтобы иметь систему вкладок, например:

...