0

In my View i have navigation but problem is when i click on link and redirect me to that page it lose active class and it again become the home to active. Can anyone please help me or point me in the right direction!
Thanks in advance.

View:

<!-- Side Navbar -->
  <nav class="side-navbar shrinked">

      <!-- Sidebar Navidation Menus-->
      <ul class="list-unstyled">
          <li class="active"><a href="/User/Home"> <i class="icon-home"></i>Home </a></li>
          <li><a href="/User/AddEmployee"> <i class=" icon-grid"></i>EMP </a></li>
          <li><a href="/User/AddUser"> <i class="fa fa-bar-chart"></i>User </a></li>
      </ul>

  </nav>

JavaScript:

<script>
    $(function () {

        $('nav.side-navbar ul li a').on('click', function () {
            $(this).parent().addClass('active').siblings().removeClass('active');
        });


    });
</script>
7 seconds
  • 133
  • 2
  • 17
  • 1
    Take a look at this https://stackoverflow.com/questions/20410623/how-to-add-active-class-to-html-actionlink-in-asp-net-mvc That might be specific to Bootstrap but the core issue, adding a class to the link to the current page. – Adam H Aug 10 '18 at 21:13

1 Answers1

2

When you load a new page all the code in current page is gone and all the scripts you have will run again on new page.

You need to compare the page's url to the links urls on page load.

Try the following:

$(function() {
  $('nav.side-navbar ul li a').each(function() {
    var isActive = this.pathname === location.pathname;
    $(this).parent().toggleClass('active', isActive);
  });
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Just one more thing , i hope its ok :) and The code you give to me its working great :) But when i go from http://localhost:xxx/User/AddEmployee > http://localhost:xxx/User/Employee?Id=221. AddEmployee lose the active and home become to active again – 7 seconds Aug 10 '18 at 21:36
  • Ok...is that main path in the menu? Or do you have sub menus also? – charlietfl Aug 10 '18 at 21:37
  • Also are you using mvc in back end? – charlietfl Aug 10 '18 at 21:38
  • No i dont have Sub menus , my menu is all i have posted , if my url is like this for ex localhost:xxx/User/AddEmployee Active will be work but when its like this localhost:xxx/User/Employee?Id=221 active gonna lose , and yes im using mvc in back – 7 seconds Aug 10 '18 at 21:46
  • if that employee id is in menu then try `var isActive = this.href=== location.href;`. reason i asked about back end is might be better to do this in the back end – charlietfl Aug 10 '18 at 21:48
  • Alright i can post Actions if it is help ! but its same . when i click on employe link in menu it will show employe page which is contains a table and in table i have link which i called details (localhost:xxx/User/Employee?Id=221) until now everything is working and then when i click on linke which is details its going to open details page and here im gonna lose active class – 7 seconds Aug 10 '18 at 22:00
  • 1
    Hard to help without a better idea of sitemap vs menu – charlietfl Aug 10 '18 at 22:06