Bootstrap 4 - classe active

Résolu
chabinot Messages postés 322 Date d'inscription   Statut Membre Dernière intervention   -  
chabinot Messages postés 322 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

3 réponses

Réponse 1 / 3
chabinot Messages postés 322 Date d'inscription   Statut Membre Dernière intervention   16
 
Merci beaucoup,
Cela marche très bien maintenant.
1
Réponse 2 / 3
jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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 ? )

0
Réponse 3 / 3
chabinot Messages postés 322 Date d'inscription   Statut Membre Dernière intervention   16
 
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.
0
jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Tu peux faire un truc du genre 

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