i have a site i'm working on and i have the nav-items set so that when you click on a nav-link it changes the active class to the link that you clicked.

with this said how do I set a certain link to be active by default in the navbar?

Code:

$(".nav-item a").on("click", function() {
  $(".nav-item a").removeClass("active");
  $(this).addClass("active");
});

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

<script src=".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>

i have a site i'm working on and i have the nav-items set so that when you click on a nav-link it changes the active class to the link that you clicked.

with this said how do I set a certain link to be active by default in the navbar?

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./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>

I am still quite new to javascript so any help will be great (even if it doesnt work)

Edit: It appears i didnt add enough detail, i'm sorry.

I would like to have the Home nav-link stay active until the user clicks another nav-link to another part of the page (im thinking about on scroll over different parts of the site but thats a different question altogether). with this in mind i want to have the site functionality to stay the same but have the default active link changed when a different one is clicked.

• javascript
• jquery
• html
• navbar

• Which link do you want to set active? Is there any criteria? Or any random link can be set active? – 31piy Commented Mar 18, 2019 at 5:58
• 2 why not just add active class on any default element in html? <a class="nav-link active" href="#"> – cjmling Commented Mar 18, 2019 at 5:58
• Agree with @cjmling - If there is no programmatic criteria for setting the active link and if it should always be the same, it would be best to just set it in the HTML. – Talha Commented Mar 18, 2019 at 6:02
• @cjmling i had it like that at the start but it would just stay active when another link was clicked – king_utlron99 Commented Mar 18, 2019 at 8:37

2 Answers 2

Just add active class to nav-link

$(".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./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>

your code is about CLICK action and you dont want it . you should use

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

in out of function click body:

<script 
src="https://cdnjs.cloudflare./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;
}

JAVASCIPT:

<script>
$('.nav-item a').addClass("active");
</script>