JQuery вкладки: как создать ссылку на конкретную вкладку?

Question

Я использую простой скрипт jQuery для вкладок:

JS:

$(document).ready(function() {

    $(".tab-content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab-content:first").show();

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab-content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).show();
        return false;
    });

});

HTML (для index.html):

<div id="tabs">

    <ul class="tabs">
        <li><a href="#tabs-voters">Top Voters</a></li>
        <li><a href="#tabs-commenters">Top Commenters</a></li>
    </ul>

    <div id="tabs-voters" class="tab-content">

    <p id="h1-01">Tab content</p>

        <p>Some content</p>

        </div>

    <div id="tabs-commenters" class="tab-content">

        <h2 id="h-02">Tab content</h2>

        <p>Some content</p>

        <h2 id="h-03">Tab content</h2>

        <p>Some content</p>

        </div>

</div>

Мне нужно создать рабочую ссылку на index.html # h-02 , index.html # h-03 и т. Д., Но эти простые ссылки не не работает, потому что вкладка скрыта по умолчанию. Можно ли изменить JS, чтобы я мог ссылаться на закладки во вкладках, которые скрываются при открытии index.html? Может ли кто-нибудь указать мне правильное направление?

Большое спасибо! :)

Answer 1

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

$(document).ready(function () {
    ...

    var tabId = window.location.hash; // will look something like "#h-02"
    $(tabId).click(); // after you've bound your click listener
});

---

Редактировать по запросу:

$(document).ready(function() {

    $(".tab-content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab-content:first").show();

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab-content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).show();
        return false;
    });

    $(window.location.hash).click(); // super-simple, no? :)
});​

---

Редактировать 2:

Если вы хотите иметь возможность указать идентификатор элемента содержимого вкладки (например, h-02 на странице, на которую вы ссылаетесь), вам нужно вернуться назад, чтобы получить идентификатор соответствующей вкладки, чтобы активировать ее. Как это:

$(document).ready(function() {
    var $tabContent = $(".tab-content"),
        $tabs = $("ul.tabs li"),
        tabId;

    $tabContent.hide();
    $("ul.tabs li:first").addClass("active").show();
    $tabContent.first().show();

    $tabs.click(function() {
        var $this = $(this);
        $tabs.removeClass("active");
        $this.addClass("active");
        $tabContent.hide();
        var activeTab = $this.find("a").attr("href");
        $(activeTab).show();
        return false;
    });

    // Grab the ID of the .tab-content that the hash is referring to
    tabId = $(window.location.hash).closest('.tab-content').attr('id');

    // Find the anchor element to "click", and click it
    $tabs.find('a[href=#' + tabId + ']').click();
});​

Использование $.closest() означает, что в хэше можно указать идентификатор самого .tab-content (например, tabs-commenters в вашем примере) или его потомка.

Я также сделал несколько других предложений по очистке выше. Не нужно повторно выбирать эти элементы DOM!

Answer 2

мне кажется, ничего не работает:

//Default Action
jQuery(".tab_content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab_content:first").show(); //Show first tab content

//On Click Event
jQuery("ul.tabs li").click(function() {
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery(".tab_content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active content
    return false;

});

Answer 3

Мне нравится ответ Дэна Пауэрса, я сейчас использую его версию.Однако сначала я подумал, что это не сработало, поэтому я сделал alert(window.location.hash) и обнаружил, что он включает #.Ответ Дэна действителен, хотя он использует # в своих идентификаторах вкладок, например tab="#tab_general".Итак, помните об этом.

Если вы хотите прочитать свое хеш-имя без #, например, tab="tab_general", замените:

$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');

на

$('#tabs a[tab=\'' + window.location.hash.substring(1) + '\']').trigger('click');

Конечно, вы также можете изменить tab на id или что-то еще.

Я не выяснил, как сделать ссылку на вложенные вкладки, хотя, например, одна вкладка содержит страницу с вложенными вкладками.

Answer 4

Это то, что я сделал, чтобы заставить мою работать, основываясь на ответе Мэтта.Я отправил это, чтобы помочь другим.

<script>
$(document).ready(function(){
    $.tabs('#tabs a');
    $('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');
});
</script>

<div id="tabs" class="htabs">
    <a tab="#tab_general">General</a>
    <a tab="#tab_other">Other</a>
</div>
<div id="tab_general">
    Tab 1 here
</div>
<div id="tab_other">
    Tab 2 here
</div>

Answer 5

Я бы попробовал немного изменить ваш код.Вот как я бы это сделал:

http://jsfiddle.net/RtCnU/8/

Таким образом, вы выполняете именно то, что хотели.

Это код, который я использовал:

<div id="tabs">

    <ul class="tabs">
        <li><a href="#tabs-voters">Top Voters</a></li>
        <li><a href="#tabs-commenters">Top Commenters</a></li>
    </ul>

    <div id="wrap">

    <div id="tabs-voters" class="tab-content">

    <p id="h1-01">Tab content</p>

        <p>Some content</p>

        </div>

    <div id="tabs-commenters" class="tab-content">

        <h2 id="h-02">Tab cdsfdfontent</h2>

        <p>Some contesdfdsfsdfant</p>

        </div>
</div>

</div>

и это Javascript:

$(document).ready(function() {

    $(".tab-content").hide();
    $("ul.tabs li a:first").addClass("active").show();
    $("#wrap > div").hide().filter(":first").show();

    $("ul.tabs li a").click(function() {
        $("ul.tabs li > a").removeClass("active");
        $(this).addClass("active");
        $("#wrap > div").hide();
        var activeTab = $(this).attr("href");
        $(activeTab).show();
        return false;
    });

});

Дайте мне знать, как это работает!

Answer 6

Вы можете передать параметр на веб-страницу через GET.

т.е. www.yourpage.com?tab=tab1

тогда например (используя php)

<?php
$tab = $_REQUEST['tab'];
?>

тогда в вашем коде JS вы можете сделать что-то вроде:

var default_id = <?php echo $tab; ?>
$("#"+default_id).addClass("active").show();

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

Редактировать Я только что заметил, что вопрос об использовании форматированных URL, например, www.example.com # h-02, в котором вам лучше придерживаться только JS

Answer 7

Ну, вы можете сделать свой URL-адрес примерно таким же, как http://site.com/index.html?voters, а затем на странице вы отметите window.location.search (поиск - это бит, включая знак вопроса).Если это "?voters", тогда вы запускаете код для выбора вкладки.Если это "?commenters", тогда вы запускаете код, чтобы выбрать эту вкладку.И так далее.