Jquery, tabs et paramètre dans l'url

Bonjour,

Je commence à découvrir Jquery et je souhaite utiliser la fonction tabs. J'ai repris un code existant que j'ai adapté à mon besoin, mais je souhaiterai pouvoir charger un onglet en particulier selon l'url qui est appelée.

Si par exemple, j'appelle l'url http://www.monsite.com/page1#onglet2.html, je souhaiterai que ce soit l'onglet 2 qui soit chargé et que les autres onglets soient masqués.

Voici le code que j'utilise :

$(function () {
    var tabContainers = $('div.tabs > div');
    
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();
        
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        
        return false;
    }).filter(':first').click();	
});

et

<div class="tabs"><!-- tabs -->
<ul class="tabNavigation">
    <li><a href="#onglet1">Onglet1</a></li>
    <li><a href="#onglet2">Onglet2</a></li>
    <li><a href="#onglet3">Onglet3</a></li>
    <li><a href="#onglet4">Onglet4</a></li>
    <li><a href="#onglet5">Onglet5</a></li>
</ul>
<!-- tab containers -->
<div id="onglet1"><p>Lorem ipsum...</p></div>
<div id="onglet2"><p>Lorem ipsum...</p></div>
<div id="onglet3"><p>Lorem ipsum...</p></div>
<div id="onglet4"><p>Lorem ipsum...</p></div>
<div id="onglet5"><p>Lorem ipsum...</p></div>
</div>

Merci pour votre aide.

Hello.

Pour travailler avec les ancres, tu dois voir du côté de l'objet history en JS pur. Avec jQuery, lorgne vers l'excellent plugin BBQ, la référence en la matière (la doc est claire et il y a pas mal d'exemples sur la home du projet).

Salut,

J'ai pondu ce petit essai, il n'y a pas de gestion de l'historique mais ce que tu as demandé y est. En plus, ça devrait être accessible puisque il est possible de naviguer au clavier et qu'en plus les tabs ne sont pas masqués mais envoyés en dehors de la page. Si le javascript est désactivé les tabs se déplient et restent lisibles.

Bon maintenant, un informaticien optimiserait mieux le code mais ça marche.
Modifié par Patidou (11 Oct 2011 - 18:21)

Florian, Patidou,

Merci à vous deux pour la réponse.

Patidou, cela correspond tout à fait à ce que je souhaitais et la solution a l'avantage d'être compréhensible pour moi. Pour la gestion de l'historique ce n'est pas nécessaire dans mon cas, donc vraiment, merci !