Couleur onglets : actif, inactif

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 8 Février 2012.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    838
    J'aime reçus:
    10
    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
     
  2. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 661
    J'aime reçus:
    4
    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".
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    838
    J'aime reçus:
    10
    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";
        }
      }
    }
    
     
  4. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 661
    J'aime reçus:
    4
    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";
        }
      }
    }
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    838
    J'aime reçus:
    10
    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 ?
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    838
    J'aime reçus:
    10
    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
     
Chargement...
Similar Threads - Couleur onglets actif Forum Date
J'hésite sur le choix des couleurs du site Demandes d'avis et de conseils sur vos sites 24 Mars 2020
Page pro : qualité de la page : couleur orange Facebook 9 Mars 2020
Changer la couleur du background d'un <tr> Développement d'un site Web ou d'une appli mobile 11 Février 2020
Reconnaitre la couleur d'un smartphone Android Le café de WebRankInfo 2 Mars 2018
Couleurs de pays et survol sur carte GG Maps YouTube, Google Images et Google Maps 10 Février 2017
Couleur en tête de la ligne active sous Excel Le café de WebRankInfo 5 Décembre 2016
Changer couleur lien avec javascript Développement d'un site Web ou d'une appli mobile 5 Décembre 2016
Personnalisation couleur navigateur mobile Développement d'un site Web ou d'une appli mobile 21 Avril 2016
Besoin de vos avis, couleurs et logo de Busy Women Demandes d'avis et de conseils sur vos sites 26 Octobre 2014
couleur de lien sur une page active Développement d'un site Web ou d'une appli mobile 12 Septembre 2014