begin process at 2012 05 28 23:55:13
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

AU SECOURS !!!

 > 

changement de couleur de l'onglet actif

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

changement de couleur de l'onglet actif

mercredi 2 mars 2005 à 12:07:10 | changement de couleur de l'onglet actif

cabane

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>

<ul id="tabfait">
   <li id='onglet1'><a href="javascript:onglet_actif(1)">Page1</a></li>
   <li id='onglet2'><a href="javascript:onglet_actif(2)">Page2</a></li>
   <li id='onglet3'><a href="javascript:onglet_actif(3)">Page3</a></li>
   <li class="active" id='onglet4'><a href="javascript:onglet_actif(4)">Page4</a> </li>
</ul> 
</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
mercredi 2 mars 2005 à 13:09:00 | Re : changement de couleur de l'onglet actif

djagger
Salut !

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

<table>
<tr><td id='onglet1' onClick="javascript:onglet_actif(1)"> onglet 1 </td></tr>
<tr><td id='onglet2' onClick="javascript:onglet_actif(2)"> onglet 1 </td></tr>
</table>

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+++
mercredi 2 mars 2005 à 14:51:29 | Re : changement de couleur de l'onglet actif

coucou747

Administrateur CodeS-SourceS
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

[ Lien ]
mercredi 2 mars 2005 à 15:09:16 | Re : changement de couleur de l'onglet actif

djagger
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 .....
jeudi 3 mars 2005 à 00:10:40 | Re : changement de couleur de l'onglet actif

chimelpremier
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
jeudi 3 mars 2005 à 09:53:36 | Re : changement de couleur de l'onglet actif

djagger
ah oué ! je connaissait pas 'active' ! c nickel !! merki :)
lundi 7 mars 2005 à 11:16:08 | Re : changement de couleur de l'onglet actif

moustik510
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!
mardi 8 mars 2005 à 00:54:11 | Re : changement de couleur de l'onglet actif

chimelpremier

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>
<body>
<ul id="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>
mardi 8 mars 2005 à 10:53:43 | Re : changement de couleur de l'onglet actif

moustik510
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!


Cette discussion est classée dans : couleur, actif, onglet, tabs, tabfait

Répondre à ce message

Sujets en rapport avec ce message

Couleur lien actif [ par seabird ] Salut,J'ai une page principal.html avec une iframe. Je veux donner une couleur au lien actif de la page principal (par exemple rouge) qui appelle une Javascript / HTML : onglet actif ? [ par newArray ] Bonsoir. Dans le cadre de la réalisation d'un site internet éducatif, je souhaiterais savoir s'il existe une fonction permettant de repérer : 1/ que l quand je clique sur internet, la page change de couleur [ par sebanaclo ] bonsoir j'ai VISTA, depuis une semaine à chaque fois que je clique avec ma souris, la page change de couleur pendant 1/4 de seconde (souvent en noir) ouvrir un nouvel onglet [ par vegetalain ] Salut, et dsl d'avance si je me gourre de thème :/ voilà je dois faire un formulaire d'envois de mail (c fait j'en ai trouvé un super), avec pièces j couleur aléatoir par heur [ par lailarch ] bonsoir je suis etudiante a ISTA NTIC filiere dveloppement info jai cherche un code en javascript et html qui va chanjer la couleur de l'arriére plan couleur aléatoir [ par lailarch ] bonsoir a tous jai cherche un code en java script qui permet de changer les couleur de l'arriere plan d'une page html selon le temps de la journer et Formulaire avec seulement des boutons submit [ par scorrom ] Bonjour, cela fait des heures que je tourne en rond sur le net, je viens de craquer en vous demandant de l'aide [^^fou] J'ai un petit formulaire très Ouverture d'un lien d'iframe dans l'onglet en cours [ par spacedelta ] Bonjour, Depuis pas mal de temps, je recherche la solution pour pouvoir ouvrir un lien se trouvant dans une iframe dans l'onglet où se trouve la page Rafraichir une page puis simuler un clic [ par HadesRising ] Bonjour à tous ! Voici mon problème : J'ai une page avec plusieurs onglets qui, grâce à un évenement onclick(), affichent un formulaire selon l'ongle rafraichir page au clic sur un onglet [ par fog8 ] Bonjour tout le monde, J'ai un problème avec mon site. J'ai une fonction qui bloque le compte lorsque l'utilisateur a tenté de se connecter plus de t


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,702 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)