Tabs+Lien qui ne fonctionne pas

Bonjour à tous

Je suis en pleine découvert du développement de site web et j'ai voulu créer un exemple de page avec une fonction de tabs. Pour l'instant tout marche sauf que je n'arrive pas a mettre plus d'un lien.

Pour être plus clair voici le lien du site en question.
http://logik01.free.fr/pourquoi/slotmachinetabs/index.html

Il y a donc une espèce de fiche pour chaque épisode de la série dexter et un lien en dessous "voir fiche épisode".

Seulement le seul lien qui marche est celui de la dernière tabs (la tabs 12). Si j'enlève la tabs 12, la 11 marche etc.
C'est donc toujours la dernière tabs qui marche. Comment faire pour que tout les liens marche et pas seulement celui de la dernière tabs ?

La réponse est peut être bête mais j'ai beau chercher je n'ai rien trouvé.

Merci d'avance pour votre aide

Bonjour,

En fait le problème est relativement simple dans l'ensemble mais pas évident à détecter.

Il vient du fait que la <div> qui se trouve au premier plan est la div qui à l'ID égale à "douze" donc la dernière, elle est donc toujours par dessus les autres ( empêchant donc le clic sur les liens sauf sur la dernière <div>)

Dans ton script javascript, tu devrais ajouter sur la fin de ton animation ( quand la div va vers le haut) un "display:none" à la div(class="contentbox") et mettre en "display:block" celle qui devient "current" (avant l'animation qui fait apparaitre le contenu).

Ou alors encore avec du javascript, tu changes les z-index de ton "current" ( en mettant toujours la div "current" au premier plan avec des ".after()" ou ".prependTo()" en jQuery, ou tout simplement avec ".css('zIndex', numIndex)" )

Sinon tu utilises le CSS3 avec la pseudo-class ":target" mais elle n'est pas compatible tous navigateurs.

La meilleure solution étant une des 2 premières.(la 2eme étant plus facile à mettre en oeuvre, à mon avis)

Bon courage


++
Modifié par ornitho13 (01 Aug 2010 - 23:41)

Ok merci beaucoup pour l'aide, mais le soucis c'est que le code javascript n'est pas de moi. Il vient de ce site http://css-tricks.com/downloads/ (c'est le premier lien "slot machine tabs").
Donc je dois avouer que tout ce que tu m'as dit s'apparrente a du chinois pour moi car je n'ai aucune notion de javascript.

J'ai tout de même tenter d'observer le code javacript mais je n'y comprend pas grand chose surtout qu'il a l'air assez grand.

Donc si tu repasse par là aurait tu de quoi m'aider d'avantage s'il te plait

J'ai rajouté ".down {z-index:1000; position:relative;}" et tout marche. Merci pour les soluces.
J'aimerais tout de même savoir pourquoi ça marche en rajoutant ces attributs a ".down" ?