Link which is being clicked upon must stay active

user_16194450 0
Viewed 85

I need to make the link which is clicked on to be active. I have the following code down below and i tried different script codes to make the link active but it doesnt seem to work. What seems to be the problem?

$("a").click(function () {
    if ($(this).hasClass("active")) {
        $(this).removeClass("active");
    } else {
        $(this).addClass("active");
    }
});
nav ul li a:hover,
nav ul li a.active {
    color: #23dbdb;
}
<nav>
    <ul>
        <li><a class="active" href="Login.html" target="dest">Home</a></li>
        <li><a href="buttonsstudent.html" target="dest">Result</a></li>
        <li><a href="card4.html" target="dest">Subjects</a></li>
        <li><a href="aboutpage.html" target="dest">About</a></li>
    </ul>
</nav>

css html jquery javascript
4 Answers

a tags has a default property of redirecting rather than staying on the same page. So when we click on a, that functionality will execute even before our code and hence our changes won't work as expected. That was the only part missing in your code, otherwise your code was working as expected. But, there will be more than one active classes at a time. So I made a few changes as below:

  • Remove the active class from all the sibling links
  • Add active class only for the corresponding link.

In this way, your code will work as a normal website is meant to work.

$('a').click(function(event){
  event.preventDefault();
  $('.red-links li  a').removeClass('active')
  $(this).addClass('active');
})
nav ul li a:hover,
nav ul li a.active{
  color: #23dbdb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
     <ul class='red-links'>
        <li><a class="active" href="Login.html" target="dest">Home</a></li>
        <li><a href="buttonsstudent.html" target="dest">Result</a></li>
        <li><a href="card4.html" target="dest">Subjects</a></li>
        <li><a href="aboutpage.html" target="dest">About</a></li>
     </ul>
  </nav>

user_33153330

Before adding the class get the li a.active and removeClass from it. Also you can do a validation to check if there exist an element li a.active before removing the class

$('a').click(function() {
  $('li a.active').removeClass('active')
  $(this).addClass('active')

})
nav ul li a:hover,
nav ul li a.active {
  color: #23dbdb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>


  <ul>
    <li><a class="active" href="Login.html" target="dest">Home</a></li>
    <li><a href="buttonsstudent.html" target="dest">Result</a></li>
    <li><a href="card4.html" target="dest">Subjects</a></li>
    <li><a href="aboutpage.html" target="dest">About</a></li>
  </ul>
</nav>

user_21813970

I propose a solution with one line of code jquery, in which the active class is removed from all a, excluding the current a, in which the active class is being added.

Method not() will exclude the current a.

$("a").click(function () {
    $("a.active").removeClass("active").not($(this).addClass("active"));
});
nav ul li a:hover,
nav ul li a.active {
    color: #23dbdb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a class="active" href="Login.html" target="dest">Home</a></li>
        <li><a href="buttonsstudent.html" target="dest">Result</a></li>
        <li><a href="card4.html" target="dest">Subjects</a></li>
        <li><a href="aboutpage.html" target="dest">About</a></li>
    </ul>
</nav>

user_135734440

You might just need :focus for this functionality. No need of JavaScript / jQuery.

nav ul li a:hover,
nav ul li a:active,   /* :active pseudo class instead of custom class 'active', just in case */
nav ul li a:focus {
  color: #23dbdb;
}
<nav>
  <ul>
    <li><a class="active" href="Login.html" target="dest">Home</a></li>
    <li><a href="buttonsstudent.html" target="dest">Result</a></li>
    <li><a href="card4.html" target="dest">Subjects</a></li>
    <li><a href="aboutpage.html" target="dest">About</a></li>
  </ul>
</nav>

user_15773960
Related