changement de couleur de l'onglet actif
cs_cabane
Messages postés
1
Date d'inscription
mercredi 2 mars 2005
Statut
Membre
Dernière intervention
2 mars 2005
-
2 mars 2005 à 12:07
moustik510 Messages postés 8 Date d'inscription vendredi 12 novembre 2004 Statut Membre Dernière intervention 24 mars 2005 - 8 mars 2005 à 10:53
moustik510 Messages postés 8 Date d'inscription vendredi 12 novembre 2004 Statut Membre Dernière intervention 24 mars 2005 - 8 mars 2005 à 10:53
8 réponses
cs_djagger
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
1
2 mars 2005 à 13:09
2 mars 2005 à 13:09
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+++
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+++
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Membre
Dernière intervention
30 juillet 2012
44
2 mars 2005 à 14:51
2 mars 2005 à 14:51
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
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
cs_djagger
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
1
2 mars 2005 à 15:09
2 mars 2005 à 15:09
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 .....
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 .....
chimelpremier
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
3 mars 2005 à 00:10
3 mars 2005 à 00:10
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
ul#tabfait li a:active,ul#tabfait li a:focus{
background-color: CeQueTuVeux;
}
active pou IE, focus pour Gecko
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
cs_djagger
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
1
3 mars 2005 à 09:53
3 mars 2005 à 09:53
ah oué ! je connaissait pas 'active' ! c nickel !! merki :)
moustik510
Messages postés
8
Date d'inscription
vendredi 12 novembre 2004
Statut
Membre
Dernière intervention
24 mars 2005
7 mars 2005 à 11:16
7 mars 2005 à 11:16
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!
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!
chimelpremier
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
8 mars 2005 à 00:54
8 mars 2005 à 00:54
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>
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>
moustik510
Messages postés
8
Date d'inscription
vendredi 12 novembre 2004
Statut
Membre
Dernière intervention
24 mars 2005
8 mars 2005 à 10:53
8 mars 2005 à 10:53
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!
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!
