1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

changement de couleur de l'onglet actif

Signaler
Messages postés
1
Date d'inscription
mercredi 2 mars 2005
Statut
Membre
Dernière intervention
2 mars 2005
 -
Messages postés
8
Date d'inscription
vendredi 12 novembre 2004
Statut
Membre
Dernière intervention
24 mars 2005
 -
Bonjour,

je suis parvenue à aligner 4 onglets en melangeant un peu de css, un peu de HTML et de javascript.

Mon problème est le suivant : lorsque je clique sur un onglet je voudrais pouvoir lui faire changer sa couleur de manière à le rendre "actif" et là je coince.

Je vous joins mes 3 bouts de code.

HTML et Javascript :

<script>
function onglet_actif(actif)
{
var i,j,nom,nb;
var Tabs=document.getElementsByTagName('li');
nb=Tabs.length;
for(i=0;i<nb;i++)
{
Tabs[i].firstChild.class=""
}
Tabs[actif].firstChild.class="active";
}
</script>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style_onglet.css">
</HEAD>



<li id='onglet1'>[javascript:onglet_actif(1) Page1]</li>
<li id='onglet2'>[javascript:onglet_actif(2) Page2]</li>
<li id='onglet3'>[javascript:onglet_actif(3) Page3]</li>
<li class="active" id='onglet4'>[javascript:onglet_actif(4) Page4] </li>

</HTML>

CSS
ul#tabfait li {
float: left;
height: 21px;
background-color: rgb(255,165, 121);
margin: 2px 2px 0 2px;
border: 1px solid rgb(0,0, 160);
}
ul#tabfait {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid rgb(0,0, 160);
margin: 0;
}
ul#tabfait li.active {
border-bottom: 1px solid #fff;
background-color: #fff;
}
#tabfait a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#tabfait a:hover {
background: #fff;
}

En fait je voudrais pouvoir passer class=active à l'onglet courant.

Please une petite reponse parceque je galère vraiment et que ce doit être hyper simple.
Merci
Afficher la suite
A voir également:

8 réponses

Réponse 1 / 8
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
 1
Salut !

A mon avis faaut faire un tableau !
vite fait ca donne:

onglet 1,
----
onglet 1

par contre change ta fonction onglet_actif() pour récupérer les td et non plus les li !

j'ai pas testé mais ca devrait marcher !

a+++
Réponse 2 / 8
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 39
salut

onmouseover="this.style.background='...'"


sinon, tu peux faire passer this en argument à ta fonction...




In a dream, I saw me, drop dead... U was here, U cried... It was just a deam, if I die, U won't cry, maybe, U'll be happy

Réponse 3 / 8
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
 1
coucou47 :
cabane a dit : "lorsque je clique sur un onglet ..."
c pas un on mouseover mais bien un onClick du coup....

Et puis passer "this" (ref a la cellule du tableau) en argument c'est beaucoup plus lourd que de passer juste un int, surtout que la fonction javascript est déjà écrite .....
Réponse 4 / 8
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
simplement dans la feuille de style :
ul#tabfait li a:active,ul#tabfait li a:focus{
background-color: CeQueTuVeux;
}
active pou IE, focus pour Gecko
Réponse 5 / 8
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
 1
ah oué ! je connaissait pas 'active' ! c nickel !! merki :)
Réponse 6 / 8
Messages postés
8
Date d'inscription
vendredi 12 novembre 2004
Statut
Membre
Dernière intervention
24 mars 2005
Comment faire quand il faut changer en même temps le background du li?

J'ai ceci : (#onglets est une balise div)

#onglets {

float:left;

width:100%;

font-size:93%;

line-height:normal;

}

#onglets ul {

margin:0;

padding:0px 10px 0px 0px;

list-style:none;

}

#onglets li {

float:right;

background:url("onglet_arrondi_gauche.gif") no-repeat left top;

margin:0;

padding:0 0 0 26px;

}

#onglets a {

float:left;

display:block;

background:url("onglet_arrondi_droit.gif") no-repeat right top;

padding:5px 25px 4px 0px;

text-decoration:none;

font-weight:bold;

color:#765;

}

#onglets a:hover {

color:#FF0000;

}



Et je veux rendre actif un onglet lorsque je clique dessus. Grâce à vous j'ai déjà trouvé :



#onglets a:focus{

background-image:url("onglet_courant_arrondi_droit.gif");

color:#000000;

}



qui change la couleur du texte et l'arrondi droit de l'onglet mais il
faut également que je modifie le background du li (la partie gauche de
l'onglet), comment sélectionner le li quand le lien qui est à
l'intérieur est actif?



--> sélection de li si a:focus{...}



Merci à vous!
Réponse 7 / 8
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
Salut,
on ne peut pas remonter au parent en CSS. Il faut mettre la classe "actif"
dans le tag li ("active" est réservé)

J'ai fait un truc à ma mode, ya puka adapter :

<HTML>
<HEAD>
<script>
encours=0;
function onglet_actif(actif)
{
if(encours)encours.className=""
actif.className="actif";encours=actif
}


</script>
<style>
ul#tabfait li {
float: left;
height: 21px;
background-color: rgb(255,165, 121);
margin: 2px 2px 0 2px;
border: 1px solid rgb(0,0, 160);
}
ul#tabfait {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid rgb(0,0, 160);
margin: 0;
}
ul#tabfait li.actif {
border-bottom: 1px solid #fff;
background-color: #fff;
}
#tabfait a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
cursor:pointer;cursor:hand/*pour IE5.0*/;
}
#tabfait a:hover {
background: #fff;
}


</style>
</HEAD>

<li onclick="onglet_actif(this)">Page1</li>
<li onclick="onglet_actif(this)">Page2</li>
<li onclick="onglet_actif(this)">Page3</li>
<li onclick="onglet_actif(this)">Page4 </li>


</HTML>
Réponse 8 / 8
Messages postés
8
Date d'inscription
vendredi 12 novembre 2004
Statut
Membre
Dernière intervention
24 mars 2005
OK merci, depuis que j'ai posté le message j'ai trouvé la solution de
me faire une petite fonction javascript comme la tienne mais je n'avais
pas pensé à une variable globale pour conserver l'onglet courant.

Du tout il fallait tous les rendre inactifs (heureusement il n'y en a
que 4) et activer le bon. Ta méthode est plus propre et plus évolutive
si je veux ajouter des onglets.




Merci pour ta réponse.



Moustik!
Répondre Posez votre question