Couleur onglets : actif, inactif

poupilou · 8 Février 2012

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

nickargall · 8 Février 2012

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".

poupilou · 8 Février 2012

nickargall a dit:
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:

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";
    }
  }
}

nickargall · 8 Février 2012

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:

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";
    }
  }
}

poupilou · 8 Février 2012

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 ?

poupilou · 9 Février 2012

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:

<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 :x

D'avance merci.

Bruno