Sujet Précédent Sujet Suivant

Bootstrap 4 - classe active

Résolu/Fermé
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 10 mars 2017 à 07:38
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 10 mars 2017 à 15:18
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

Réponse 1 / 3
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
10 mars 2017 à 15:18
Merci beaucoup,
Cela marche très bien maintenant.
1
Réponse 2 / 3
jordane45 Messages postés 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
10 mars 2017 à 10:03
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 mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
10 mars 2017 à 11:26
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 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
10 mars 2017 à 11:43
Tu peux faire un truc du genre 

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