J'ai un site sur lequel je travaille et j'ai les éléments de navigation définis de sorte que lorsque vous cliquez sur un lien de navigation, la classe active soit remplacée par le lien sur lequel vous avez cliqué.

Ceci dit, comment puis-je définir un certain lien pour qu'il soit actif par défaut dans la barre de navigation ?

Code:

$(".nav-item a").on("click", function() {
  $(".nav-item a").removeClass("active");
  $(this).addClass("active");
});
.nav-item a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>

Je suis encore assez novice en javascript, donc toute aide sera précieuse (même si cela ne fonctionne pas)

Edit : Il semble que je n'ai pas ajouté assez de détails, je suis désolé.

J'aimerais que le lien de navigation d'accueil reste actif jusqu'à ce que l'utilisateur clique sur un autre lien de navigation vers une autre partie de la page (je pense à faire défiler différentes parties du site mais c'est une question complètement différente). dans cet esprit, je souhaite que la fonctionnalité du site reste la même, mais que le lien actif par défaut soit modifié lorsqu'un autre est cliqué.

2
king_utlron99 18 mars 2019 à 08:55

2 réponses

Meilleure réponse

Ajoutez simplement la classe active au lien de navigation

$(".nav-item a").on("click", function() {
  $(".nav-item a").removeClass("active");
  $(this).addClass("active");
});
.nav-item a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>
3
Abhiram 18 mars 2019 à 06:02

Votre code concerne l'action CLICK et vous n'en voulez pas. Tu devrais utiliser

$('.nav-item a').addClass("active");

Dans le corps du clic hors fonction :

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>

CSS:

.nav-item a.active 
{
color: red;
}

JAVASCRIPT:

<script>
$('.nav-item a').addClass("active");
</script>
0
esnkrimi 18 mars 2019 à 06:05