Bootstrap 4 - classe active [Résolu/Fermé]

Signaler
Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
-
Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
-
Bonjour,
J'ai un menu déroulant bootstrap dont voici le code :
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<a class="navbar-brand" href="/" rel="nofollow noopener noreferrer" target="_blank"><img class="logo" src=""quot;img/logo.png" alt=""></a>

		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle active" href="#" rel="nofollow noopener noreferrer" target="_blank" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Jeux de mots <span class="sr-only">(current)</a>
					<div class="dropdown-menu bg-primary" aria-labelledby="navbarDropdownMenuLink">
						<?= $jeux[1]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[2]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[3]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[4]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[5]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[6]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[7]; ?>	      		          
						<div class="divided"></div>
						<?= $jeux[8]; ?>
					</div>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="http://www.programme.tv" rel="nofollow noopener noreferrer" target="_blank">Programmes Tv</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" rel="nofollow noopener noreferrer" target="_blank" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Liens utiles</a>
					<div class="dropdown-menu bg-primary" aria-labelledby="navbarDropdownMenuLink">
						<?= $link[1]; ?>
						<div class="divided"></div>
						<?= $link[2]; ?>
						<div class="divided"></div>
						<?= $link[3]; ?>
						<div class="divided"></div>
						<?= $link[4]; ?>
						<div class="divided"></div>
						<?= $link[5]; ?>
						<div class="divided"></div>
						<?= $link[6]; ?>
					</div>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" rel="nofollow noopener noreferrer" target="_blank" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Administrations</a>
					<div class="dropdown-menu bg-primary" aria-labelledby="navbarDropdownMenuLink">
						<?= $adm[1]; ?>
						<div class="divided"></div>
						<?= $adm[2]; ?>
						<div class="divided"></div>
						<?= $adm[3]; ?>      
					</div>
				</li>
			</ul>
		</div>
	</nav

Dans le premier <a class="nav-link dropdown-toggle active" href="#" rel="nofollow noopener noreferrer" target="_blank" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Jeux de mots <span class="sr-only">(current)</a>
J'aimerais, lorsque je clique sur un autre lien, l'activer et désactiver le lien en cours.
Merci, si quelqu'un a une idée

3 réponses

Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
14
Merci beaucoup,
Cela marche très bien maintenant.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
32050
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 avril 2021
3 389
Bonjour,

Que contiennent tes liens ? Tu aurais 2 ou 3 exemples ?
TU restes dans la même page où ça charge une autre quand tu cliques dessus ?
Si tu restes sur la même.... tu passes des infos dans les variables GET ?
Sinon ils font quoi tes liens ? Quelque chose est déclenchés en JS peut-être (l'affichage d'onglets/div ? )

Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
14
De quel lien veux-tu parler?
Il s'agit des item du menu.

Jeux de mots Programmes Tv Liens utiles Administratons

Sont les entêtes du menu. Par défaut, "Jeux de mots" est initialisé par la classe "active".
Ce que je cherche, c'est de faire en jquery un removeClass('active') quand je clique sur un autre menu et faire un addClass('active') sur le menu cliqué.
La classe "active" se situe au niveau de la balise <a classe="nav-link dropdown-toggle active">
Voir le code.
Messages postés
32050
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 avril 2021
3 389
Tu peux faire un truc du genre

$(".nav-link").click(function(){
   $(".nav-link").removeClass('active');
   $(this).addClass('active');
});