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 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 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>

A voir également:

JS Styler l'onglet actif d'un menu
Menu déroulant excel - Guide
Rouvrir un onglet fermé - Guide
Windows 11 menu démarrer classique - Guide
Pourquoi je ne vois plus actif il y a ✓ - Forum Facebook Messenger
Onglet disposition excel - Forum Excel

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
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';
 }

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.

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
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
}

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

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
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...

Discussions similaires

Que signifie "actif il y a x minutes" ?

Javascript Arrondi à 2 chiffres après la virgule

Changer la résolution du signal actif

Pourquoi l'info "actif depuis "x" minutes" n'apparaît plus ?

code couleur associé a une image