The link that has been clicked on should remain in an active state

Question

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue?

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

javascript html jquery css

Answer 1

Answer №1

a tags are designed to redirect by default rather than remaining on the same page. This means that when we click on an a tag, its functionality will execute before our code does, resulting in unexpected behavior. The key issue in your code was the presence of multiple active classes at the same time. To address this, I made the following adjustments:

Removed the active class from all sibling links.
Added the active class only to the corresponding link.

This modification ensures that your code functions as a typical website should.

$('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>

Answer 2

a tags are designed to redirect by default rather than remaining on the same page. This means that when we click on an a tag, its functionality will execute before our code does, resulting in unexpected behavior. The key issue in your code was the presence of multiple active classes at the same time. To address this, I made the following adjustments:

Removed the active class from all sibling links.
Added the active class only to the corresponding link.

This modification ensures that your code functions as a typical website should.

$('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>

Answer 3

Answer №2

To ensure smooth functionality, it is recommended to first retrieve the element with the class 'li a.active' and remove the 'active' class from it before adding it to another element. Additionally, consider adding a validation step to check if the element 'li a.active' exists before proceeding with 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>

Answer 4

To ensure smooth functionality, it is recommended to first retrieve the element with the class 'li a.active' and remove the 'active' class from it before adding it to another element. Additionally, consider adding a validation step to check if the element 'li a.active' exists before proceeding with 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>

Answer 5

Answer №3

To achieve this functionality, you can simply use the :focus pseudo-class without the need for JavaScript or jQuery.

nav ul li a:hover,
nav ul li a:active,   /* Utilizing :active instead of a custom 'active' class */
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>

Answer 6

To achieve this functionality, you can simply use the :focus pseudo-class without the need for JavaScript or jQuery.

nav ul li a:hover,
nav ul li a:active,   /* Utilizing :active instead of a custom 'active' class */
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>

Answer 7

Answer №4

Here is a neat jQuery solution that uses just one line of code. It removes the active class from all a elements except for the current one, which it adds the active class to.

The not() method is used to exclude the current a element.

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

Answer 8

Here is a neat jQuery solution that uses just one line of code. It removes the active class from all a elements except for the current one, which it adds the active class to.

The not() method is used to exclude the current a element.

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

The link that has been clicked on should remain in an active state

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the most effective way to alter the elements in a JavaScript array based on the total count of another element's value?

Transfer information using the Ajax jQuery technique

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

To use the ModuleWithProviders<T> in the angular-autofocus-fix package, you must provide 1 type argument

Cropping and resizing images

Even after dynamically removing the class from the element, the Click event can still be detected

Creating a webpage that utilizes varying headers for each section can help to

Arranging a flex item below another flex item within a flexbox container

Ways to delete a CSS attribute with jquery

Bringing in the node-spotify or spotify-web modules to the browser for seamless integration

The visibility of a CSS class is rendered non-apparent when formed through the implementation

What techniques do Python and Javascript use to handle resizing of arrays?

Ways to emphasize a particular <li> element?

I'm perplexed by the inner workings of infinite ajax scroll in fetching additional posts

Could someone please advise me on how to prevent the second animation from being overridden?

Displaying a Jquery slider by clicking on links

Integrating Material-UI Dialog with Material-table in ReactJS: A Step-by-Step Guide

Prevent duplicate email submissions to the database by utilizing the jQuery validation plugin with AJAX

Create a self-bot that can generate a new server