Un truc dans ce genre:
<ul class="onglets">
<li><a href="#" name="contenu_1" class="tab active">Les derniers
articles ...</a></li>
<li><a href="#" name="contenu_2" class="tab">... et les autres</a></li>
</ul>
<div class="contenu_1 content">
<INCLURE {fond=inclusions/inc-une_derniers}>
</div>
<div class="contenu_2 content">
<INCLURE {fond=inclusions/inc-plan}>
</div>
$(document).ready( function()
{
// Lorsqu'un lien a.tab est cliqué
$("a.tab").click( function ()
{
// Mettre tous les
onglets non actifs
$(".active").removeClass("active");
// Mettre l'onglet
cliqué actif
$(this).addClass("active");
// Cacher les
boîtes de contenu
$(".content").slideUp();
// Pour afficher
la boîte de contenu associé, nous
// avons modifié
le titre du lien par le nom de
// l'identifiant
de la boite de contenu
var contenu_aff =
$(this).attr("name");
$("." +
contenu_aff).slideDown();
}
);
}
);
Ca passe ?
Le 10 janvier 2010 21:48, Jean-Christophe Villeneuve
<jcvilleneuve@cegetel.net> a écrit :
ou oui j'avais bien compris que name et id revenaient au même.
mais je n'arrive pas à bidouiller comme il faut
en remplaçant name par class et en changeant les class des li comme tu le
proposes, j'obtiens une page valide mais si les blocs se ferment au clic, le
bloc cliqué ne se déroule pas.
bref je n'y arrrive pas
bobof a écrit :
bonsoir JC,
j'ai cru comprendre (pas sûr à 100%) qu'en XHTML name="" et id="" c'est
équivalent au regard de la validation
et en bidouillant le javascript ?
var contenu_aff = $(this).attr("name");
en
var contenu_aff = $(this).attr("class");
puis
<li><a href="#" name="" class="tab active contenu_1">Les derniers articles
...</a></li>
c'est au pif !
cordialement
Jean-Christophe Villeneuve a écrit :
Bonsoir
un problème non spip mais vous êtes si bons ...
Dans ma page d'accueil j'ai inclus un fichier
<ul class="onglets">
<li><a href="#" name="contenu_1" class="tab active">Les derniers
articles ...</a></li>
<li><a href="#" name="contenu_2" class="tab">... et les autres</a></li>
</ul>
<div id="contenu_1" class="content">
<INCLURE {fond=inclusions/inc-une_derniers}>
</div>
<div id="contenu_2" class="content">
<INCLURE {fond=inclusions/inc-plan}>
</div>
Ainsi avec le javascript
$\(document\)\.ready\( function\(\)
\{
// Lorsqu'un lien a\.tab est cliqué
$\("a\.tab"\)\.click\( function \(\)
\{
// Mettre tous les
onglets non actifs
$(".active").removeClass("active");
// Mettre l'onglet
cliqué actif
$(this).addClass("active");
// Cacher les boîtes de
contenu
$(".content").slideUp();
// Pour afficher la
boîte de contenu associé, nous
// avons modifié le
titre du lien par le nom de
// l'identifiant de la
boite de contenu
var contenu_aff =
$(this).attr("name");
$("#" +
contenu_aff).slideDown();
}
);
}
);
j'obtiens l'effet visible sur cette page (y'a 3 onglets mais c'est le même
principe)
Mon problème est que j'ai des avertissements XHTML
line 577 column 3 - Avertissement: <div> anchor "contenu_1" already defined
Normal ... mais comment l'éviter ?
________________________________
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
