Sujet Précédent Sujet Suivant

JS Styler l'onglet actif d'un menu

Fermé
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 - 8 août 2020 à 21:59
jordane45 Messages postés 38254 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 octobre 2024 - 10 août 2020 à 17:47
Bonjour,
J'aimerais que l'onglet actif prenne ce style : 
#menu li a{
		background: #009E2D;
		color: #FFF;
	}

J'ai ce menu et j'ai crée une fonction qui sera appelée au click de l'onglet mais je ne sais pas comment l'appliquer à l'autre onglet: 
<div id="menu">
			<ul>
				<li id="active1"><a href="index.php" accesskey="1" title="" onclick="myFunction();">Homepage</a></li>
				<li id="active2"><a href="clients.php" accesskey="2" title="" onclick="myFunction();">Our Clients</a></li>
			</ul>
		</div>



<script>
		function myFunction(){
          document.getElementById('active').style = 'background: #009E2D; color: #FFF';
        }
	</script>

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38254 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 octobre 2024 4 692
Modifié le 9 août 2020 à 10:59
Bonjour,

Le plus simple 
<ul>
  <li id="active1"><a href="index.php" accesskey="1" title="" onclick="myFunction('active1');">Homepage</a></li>
  <li id="active2"><a href="clients.php" accesskey="2" title="" onclick="myFunction('active2');">Our Clients</a></li>
</ul>



function myFunction(id_li){
   document.getElementById(id_li).style = 'background: #009E2D; color: #FFF';
 }


0
Réponse 2 / 3
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
9 août 2020 à 11:40
Ok merci en fait le style s'applique uniquement au click et disparait, j'aimerais que le style reste lorsque je suis sur la page associée au lien.
0
jordane45 Messages postés 38254 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 octobre 2024 4 692
10 août 2020 à 14:21
Le problème, c'est que lors du cliques sur un lien, tu rediriges vers une autre page....index.php ou clients.php

Il ne faut donc pas gérer en javascript... mais en php ..

Un truc du genre 
$currentPageName =  basename($_SERVER['PHP_SELF']); /* Returns The Current PHP File Name */
if(  $currentPageName == "index.php" ){
   // ici tu places ton code pour mettre la couleur voulue pour ta page index  
}

if(  $currentPageName == "clients.php" ){
   // ici tu places ton code pour mettre la couleur voulue pour ta page clients
}
0
Réponse 3 / 3
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
10 août 2020 à 17:11
Merci, j'ai fait ceci mais le style s'applique uniquement au clic de la souris après ça disparaît : 
$currentPageName =  basename($_SERVER['PHP_SELF']); /* Returns The Current PHP File Name */
if((  $currentPageName == "index.php" ) || (  $currentPageName == "clients.php" )) {
   #menu .current_page_item a
	{
		background: #009E2D;
		color: #FFF;
	} 
}
0
jordane45 Messages postés 38254 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 octobre 2024 4 692
10 août 2020 à 17:47
Tu fais n'importe quoi...
Tu ne peux pas mettre du css n'importe comment dans du code php...
0

Discussions similaires

Que signifie "actif il y a x minutes" ?
Utilisateur anonyme -
Anne -

11 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Changer la résolution du signal actif
Nikana35 -
Inconnu -

5 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
Pourquoi l'info "actif depuis "x" minutes" n'apparaît plus ?
Uhlrich -
ggg -

11 réponses