Bootstrap 4 - classe active

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