Nsryjdtyk

I'm trying to use J Query addClass and RemoveClass to set my selected tab class attribute with the active class. I added alert to make sure the function fires, and the alert message shows up.
problem is addClass and removeClass don't seem to be working.

        $(document).ready(function () {

            $('a').click(function () {

                alert(this.tagName);

                $('a').removeClass("active");

                $(this).addClass("active");                                      



            });

        });

I'm using asp.net MVC for building the links, and bootstrap for styling:

        <ul class="nav navbar-nav text-center">

                <li>@Html.ActionLink("Home", "Index", "Home")</li>

                <li>@Html.ActionLink("About", "About", "Home")</li>

                <li>@Html.ActionLink("Recommendations", "Recommendations", "Home")</li>

                <li>@Html.ActionLink("Gallery", "Gallery", "Home")</li>

                <li class="dropdown">

                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">actions

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu">

                        <li><a class="dropdown-item" href="#">1</a></li>

                        <li><a class="dropdown-item" href="#">2</a></li>

                        <li><a class="dropdown-item" href="#">3</a></li>

                    </ul>

                </li>

            </ul>

this is the HTML code as copied from browser after clicking the link and getting alert message, but none of the a tags has the active class...

    <ul class="nav navbar-nav text-center">

                <li><a href="/Home/Index">Home</a></li>

                <li><a href="/">About</a></li>

                <li><a href="/Home/Recommendations">Recommendations</a></li>

                <li><a href="/Home/Gallery">Gallery</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">auctions

                       <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu">

                        <li><a class="dropdown-item" href="#">1</a></li>

                        <li><a class="dropdown-item" href="#">2</a></li>

                        <li><a class="dropdown-item" href="#">3</a></li>

                    </ul>

                 </li>

             </ul>

you can do like

<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>

ok, found the answer based on what said @DnyanWaychal that page is redirected to another page after adding the class, so i changed if to influence the right page:

$(function() {

   var href = window.location.href;

   $('a').each(function(e,i) {

   if (href.indexOf($(this).attr('href')) >= 0) {

      $(this).addClass('active');

   }

 });

});

You can have a separate class for the tabs. In that case please try the below code.

$(document).ready(function () {

        $('<className> a').click(function () {

            $(this).toggleClass("active");                                     



        });

    });