les onglets jQuery: comment faire pour créer un lien vers un onglet spécifique?

Dans votre document prêt gestionnaire, vous pouvez examiner la valeur du fragment et de l'utilisation de JavaScript pour afficher l'onglet correspondant.

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

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

---

Modifier comme demandé:

$(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? :)
});​

---

Edit 2:

Si vous voulez être en mesure de spécifier un ID d'un onglet de l'élément de contenu (comme h-02 dans la page liée), alors vous avez à travailler vers l'arrière pour obtenir l'ID de l'onglet correspondant pour l'activer. Comme ceci:

$(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();
});​

À l'aide de $.la plus proche() signifie que le hachage pouvez spécifier l'ID de la .tab-content lui-même (comme tabs-commenters dans votre exemple), ou un enfant de celui-ci.

J'ai fait quelques autres de nettoyage des suggestions ci-dessus. Pas besoin de continuer à re-sélectionner les éléments du DOM!

Bien, vous pouvez faire votre URL de quelque chose comme http://site.com/index.html?voters et puis, dans la page, vous vérifiez window.location.search (recherche du bit, y compris le point d'interrogation). Si c'est "?voters" ensuite, vous exécutez le code pour sélectionner l'onglet. Si c'est "?commenters" ensuite, vous exécutez le code pour sélectionner cet onglet. Et cetera.

Vous pourriez passer un paramètre à la page web via l'OBTENIR.

c'est à dire www.yourpage.com?tab=tab1

alors, par exemple (à l'aide de php)

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

ensuite dans ton code JS, vous pouvez faire quelque chose comme:

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

bien que vous devriez vérifier pour s'assurer que le default_id est valide, et si pas de charge de travail par défaut(comme vous le faites déjà)

Modifier je viens de remarquer que la question a été de vouloir utiliser des Url formatée comme, http://www.example.com#h-02 dans lequel vous êtes mieux coller à l'aide de JS seulement

J'aime Dan Pouvoirs réponse, je suis actuellement en utilisant une version de ce. Je n'ai cependant, au premier abord, pense qu'il ne fonctionnait pas donc j'ai fait un alert(window.location.hash) et découvert qu'il comprenait la #. Dan réponse est valide, bien que depuis il ne l'utiliser # dans son onglet id, par exemple tab="#tab_general". Donc, être conscient de cela.

Si vous souhaitez lire votre nom de hachage sans le #, par exemple tab="tab_general", remplacer:

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

avec

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

Bien sûr, vous pouvez également modifier tab à id ou quelque chose d'autre.

Je n'ai pas compris comment faire un lien vers imbriquée onglets si, par exemple, lorsqu'un onglet contient une page, avec des sous-onglets.