Couleur onglets : actif, inactif

**le Mer Fév 08, 2012 10:42**

Salut,

J'ai 2 onglets sur une page qui ont des liens <a href="#">Onglet n° 1</a>, <a href="#">Onglet n° 2</a> je souhaite lorsque je clique sur un de ces onglets (liens) qu'il m'affiche une div en dessous (donc sur la même page, on n'affiche pas une nouvelle page).

Les div (afficher/masquer) fonctionnent parfaitement mais je n'arrive pas à changer la couleur des onglets lorsque je clique sur l'un deux.

Comment faire pour changer ces onglets de couleur lors du clic ?

Merci pour votre aide.

Bruno

**le Mer Fév 08, 2012 11:10**

Bonjour
Tu ajoutes dans ton action javascript un code qui va ajouter une classe CSS sur l'onglet actif & l'enlever sur l'autre.
dans cette classe CSS, tu spécifies la couleur de ton onglet "actif".

**le Mer Fév 08, 2012 11:14**

nickargall a écrit:Bonjour
Tu ajoutes dans ton action javascript un code qui va ajouter une classe CSS sur l'onglet actif & l'enlever sur l'autre.
dans cette classe CSS, tu spécifies la couleur de ton onglet "actif".

Merci pour ta réponse mais mes compétences en javascript sont limités et je ne sais pas trop quel code javascript je dois mettre pour que cela fonctionne

Mon code javascript pour afficher et masquer mes div est :

Code: Tout sélectionner: function Affiche(){ var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++){ Obj = document.getElementById( Arg[i]); if( Obj){ Obj.style.visibility = "visible"; Obj.style.display = ""; } } } function Masque(){ var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++){ Obj = document.getElementById( Arg[i]); if( Obj){ Obj.style.visibility = "hidden"; Obj.style.display = "none"; } } }

**le Mer Fév 08, 2012 11:41**

En donnant des id="onglet1" et "onglet2" aux onglets, en prévoyant 2 classes CSS actif & inactif, tu peux faire comme ça (pas sur à 100% que ca fonctionne) :

Code: Tout sélectionner: function Affiche(){ var Arg = arguments; var Obj; var Obj2; for( var i=0; i< Arg.length; i++){ Obj = document.getElementById( Arg[i]); Obj2 = document.getElementById( 'onglet'+Arg[i]); if( Obj){ Obj.style.visibility = "visible"; Obj.style.display = ""; Obj2.className= "actif"; } } } function Masque(){ var Arg = arguments; var Obj; var Obj2; for( var i=0; i< Arg.length; i++){ Obj = document.getElementById( Arg[i]); Obj2 = document.getElementById( 'onglet'+Arg[i]); if( Obj){ Obj.style.visibility = "hidden"; Obj.style.display = "none"; Obj2.className= "inactif"; } } }

**le Mer Fév 08, 2012 15:47**

Merci pour ta réponse mais ça ne marche pas

J'ai remplacé ton code javascript par le mien et maintenant les div ne s'affichent plus, il y a uniquement la div qui s'affiche au chargement de la page ensuite quand je clique sur mes onglets la div dessous ne s'affiche pas !

Comment dire au chargement de la page que c'est cet onglet qui sera actif ?

**le Jeu Fév 09, 2012 10:59**

J'ai réussi à faire fonctionner mes onglets mais j'ai 2 soucis :

1) la couleur du lien <a> de l'onglet actif reste de couleur blanc, je voudrais que cet onglet actif ai un fond bleu ciel et le texte légèrement noir (#243A44).

2) mes onglets ont des angles arrondis (en haut à gauche et à droite) mais le background de l'onglet n'est pas tout à fait de la même longueur et de la même couleur lorqu'on passe la souris dessus, je pige pas pourquoi ?

Voici mon code :

Code: Tout sélectionner: <HTML> <HEAD> <script> encours=0; function onglet_actif(actif) { if(encours)encours.className="" actif.className="actif";encours=actif } </script> <style> ul.tabfait { list-style-type: none; margin: 2px 2px 0 2px; padding-bottom: 34px; padding-left: 0; } ul.tabfait li { float: left; background-color:#51789E;border:1px solid #89a;text-decoration:none;margin: 2px 2px 0 2px;padding:5px;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;behavior: url(scripts/PIE.htc); } ul.tabfait li.actif { background-color: #D8E0E8;color:#243A44;margin: 2px 2px 0 2px;padding:5px;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;behavior: url(scripts/PIE.htc); } .tabfait a { text-decoration: none; color:#FFFFFF; margin: 2px 2px 0 2px;padding:5px;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;behavior: url(scripts/PIE.htc); cursor:pointer;cursor:hand/*pour IE5.0*/; } .tabfait a:hover { background-color: #D8E0E8;color:#243A44;margin: 2px 2px 0 2px;padding:5px;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;behavior: url(scripts/PIE.htc); } .tabfait a:active {color:#243A44;margin: 2px 2px 0 2px;padding:5px;} </style> </HEAD> <body> <ul class="tabfait"> <li onclick="onglet_actif(this)"><a>Page1</a></li> <li onclick="onglet_actif(this)"><a>Page2</a></li> <li onclick="onglet_actif(this)"><a>Page3</a></li> <li onclick="onglet_actif(this)"><a>Page4</a> </li> </ul> </body> </HTML>

Quelqu'un peut-il m'aider, ça fait 1 journée que je suis là-dessus je deviens dingo

D'avance merci.

Bruno

Couleur onglets : actif, inactif

Couleur onglets : actif, inactif

Re: Couleur onglets : actif, inactif

Re: Couleur onglets : actif, inactif

Re: Couleur onglets : actif, inactif

Re: Couleur onglets : actif, inactif

Re: Couleur onglets : actif, inactif

Lectures recommandées sur ce thème :

Qui est en ligne