squelettes à onglets, Jquery???

salut
je suis entrain de mettre au point un squelette avec un menu à onglets basé sur http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

je suis arrivé à l'adapter et ça donne
http://lyc89-amyot.ac-dijon.fr/spip.php?page=tabs
qui est déjà relativement satisfaisant.

Mon problème : je voudrais pouvoir ouvrir directement l'onglet souhaité
http://lyc89-amyot.ac-dijon.fr/spip.php?page=tabs#tab2 (ici le quatrième onglet (rubrique 2)) à partir de l'url et ça ne marche pas.

ça vient certainement du code de jquery qui ne détecte pas le numéro de l'onglet dans l'url, mais comme je suis une quiche (voire une tarte à la tomate) en jquery, je fais appel à vous pour modifier le code.

le squelette est la :
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.html
le code javascript ici :
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.js
et la feuille de style
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.css

à terme je veux pouvoir ouvrir l'article 12 de la sous rubrique 8 de la rubrique 2 dans le bon onglet.

merci

rpapa a écrit :

salut
je suis entrain de mettre au point un squelette avec un menu à onglets
basé sur http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

je suis arrivé à l'adapter et ça donne
http://lyc89-amyot.ac-dijon.fr/spip.php?page=tabs
qui est déjà relativement satisfaisant.

Mon problème : je voudrais pouvoir ouvrir directement l'onglet souhaité
http://lyc89-amyot.ac-dijon.fr/spip.php?page=tabs#tab2 (ici le quatrième
onglet (rubrique 2)) à partir de l'url et ça ne marche pas.

ça vient certainement du code de jquery qui ne détecte pas le numéro de
l'onglet dans l'url, mais comme je suis une quiche (voire une tarte à la
tomate) en jquery, je fais appel à vous pour modifier le code.

le squelette est la :
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.html
le code javascript ici :
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.js
et la feuille de style
http://lyc89-amyot.ac-dijon.fr/squelettes/tabs.css

à terme je veux pouvoir ouvrir l'article 12 de la sous rubrique 8 de la
rubrique 2 dans le bon onglet.

merci

Je dis peut-être n'importe quoi, mais il me semble qu'il y a une lame du
couteau suisse qui fait ça très très bien et qu'il suffit de relifter.

FDM

Bonjour,

Le code intéressant se trouve dans le fichier javascript que tu cites :

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

C’est ces deux lignes qui vont activer la première rubrique lors de l’affichage de la page.
Au final, jquery se contente d’ajouter la classe « active » à ces deux éléments.

Tu dois pouvoir retomber sur tes pattes en commentant ces deux lignes :
/*

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

*/

Puis en modifiant le squelette de telle sorte que la classe active apparaisse sur les éléments que tu souhaites afficher au lieu d’être arbitrairement initialisés au début par jquery.
Pour cela il faut rechercher du coté de la balise #EXPOSE et modifier ces deux lignes :.

<li><a href="#tab#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</a></li>

et 

<div id="tab1" class="tab_content">

A modifier en un truc plus ou moins dans ce goût :

<li [class="(#EXPOSE{active,})"] ><a href="#tab#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</a></li>

et

<div id="tab1" class="tab_content [(#EXPOSE{active,})]">

C’est peut être pas la solution idéale, mais c’est dans cette direction que je chercherais.

Bonne bidouille !

Vincent