Change active li when clicking link

Question

I currently have a list in my navigation:

<ul class="nav menu">
    <li class="active"><a href="main.php"> MainPage</a></li>
    <li><a href="hello.php"> Second Link</a></li>
    <li><a href="third.php"> Third Link</a></li>
    <li><a href="/knowledgebase/"> Knowledge Base</a></li>
</ul>

I would like the active class to change when a link has been clicked. Is there an easy way to do this?

Answer 1

Remove active class from all li and add it to the current clicked li

$("li").click(
    function(event) {
      $('li').removeClass('active');
      $(this).addClass('active');
      event.preventDefault()
    }
);

.active a{
color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
    <li class="active"><a href="main.php"> MainPage</a></li>
    <li><a href="hello.php"> Second Link</a></li>
    <li><a href="third.php"> Third Link</a></li>
    <li><a href="/knowledgebase/"> Knowledge Base</a></li>
</ul>

Answer 2

I understood the following if the user clicks on a link the class of the parent node should be set to active

<ul class="nav menu">
    <li class="active"><a href="main.php">Main Page</a></li>
    <li><a href="hello.php">hello</a></li>
</ul>

Option 1: Server side solution

If a user clicks on a link <a href="...">link</a> the browser navigates to this link. Based on the links in your code this would mean that the browser leaves the page main.php and loads hello.php. In this case your server receives the request for the page and returns the page to the client (the browser). Since your link contains .php i assume that you use php for server side rendering. To add your navigation menu to every page you could us include('myMenu.php');

This answer explains how include works. Now you could write the following inside hello.php

<?php
    $hello = 'active';
    include 'myMenu.php';
?>

And myMenu.php could look like this

<ul class="nav menu">
    <li class="<?php echo $main; ?>"><a href="main.php">Main Page</a></li>
    <li class="<?php echo $hello;?>"><a href="hello.php">hello</a></li>
</ul>

I have no php installed and could not test it but i created this codepad demo and the output is this

<ul class="nav menu">
    <li class=""><a href="main.php">Main Page</a></li>
    <li class="active"><a href="hello.php">hello</a></li>
</ul>

Since inside hello.php the variable $hello was set to active and the variable $main was not defined the output is class="active" for $hello and class="" for $main.

Option 2: Client side solution

A client side solution using javascript.

• make sure that you prevent any default action normally taken by the implementation. The default behavior associated with a link is the retrieval of another Web resource this means the browser navigates to the next page (see HTML 4.01 Specification). So clicking on a link <a href="hello.php">hello<php> must not fire the default behaviour.
• load the matching content (the content of page hello.php into the current page. This is done by an javascript ajax request (read more here or here).
• set the active class for the parent node (your list item <li>

A few pointers

• Document Object Model (DOM) Level 2 Events Specification: The event is dispatched to its target EventTarget and any event listeners found there are triggered. Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward,
• Capturing: Event capture is the process by which an EventListener registered on an ancestor of the event's target can intercept events of a given type before they are received by the event's target. Capture operates from the top of the tree, generally the Document, downward, making it the symmetrical opposite of bubbling which is described below. The chain of EventTargets from the top of the tree to the event's target is determined before the initial dispatch of the event.
• Based on this answer IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both

If you want it to work in IE<9 you have to prevent the default behaviour for a click on the link <a ... and not the parent node <li ...>. The other answers do not take this into consideration.

Conclusion

Without more information which option you are looking for this is fishing in the dark.

Answer 3

try this one :

HTML :

<ul class="nav menu">
    <li><a href="main.php"> MainPage</a></li>
    <li><a href="hello.php"> Second Link</a></li>
    <li><a href="third.php"> Third Link</a></li>
    <li><a href="/knowledgebase/"> Knowledge Base</a></li>
</ul>

JavaScript :

$(function() {
    var u = window.location.href.substr(window.location.href
                .lastIndexOf("/") + 1);
    $(".nav li a").each(function() {
    $h = $(this).attr("href");
    if ($h == u || $h == '')
        $(this).addClass("active");
    })
});

Be sure to add jQuery!

Answer 4

You can do it in multiple ways depending on the frontend framework you are using. You can use Jquery to detect clicks and add/remove classes.

$("li").click(
    function(event) {
      $('li').removeClass('active')
      $(event.target.parentNode).addClass('active')
    }
);

What this is doing is checking for clicks on all li elements. Once there is a click it removes the active class from all li elements and adds active class to the currently clicked element. Here is the plunkr - https://plnkr.co/edit/E6wIUgzkvNjn0xFQoa7F?p=preview