Question

I am trying to add class for selected menu using jquery stuff. I tried the following method,its not working.

And my code is

<div class="paragraph">
   <ul class="tablinkss">
        <li class="active">@Html.ActionLink("Login", "LogOn")</li>
        <li>@Html.ActionLink("Register", "Register")</li>
   </ul>
</div>

And my jquery

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

Thanks,

Answer 1

Html.ActionLink returns a hyperlink that will have the browser load a new page. JavaScript will not work in this case unless you are preventing the link from loading the next page. Well, it will work for a split second then the browser will show the new page.

1. Login is active.
2. The user clicks Register.
3. Register becomes active due to your JavaScript.
4. The browser loads the register page.
5. Login is active once again.

You need to fix this in your Razor template and not in JavaScript.