Toggle active class in nav bar with JQuery

Viewed 65994
<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

So I wanted to bind to click of each of these Id's, and set class="active" on the one that was clicked, and remove it from all others.

I can do the first part, but how can I do the latter?

7 Answers

You can add active class using below single line without using any event

$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

link to refer

Related