How to change the active class when clicking on other link?

Question

There are 2 scenarios for this issue:

with using preventDefault()
Without using preventDefault()

I am changing the active class using jQuery.

What happens when I use preventDefault():

As you can see, I clicked on About us link, it shows active after clicking but the content is not displaying.

What happens when I don't use preventDefault():

As you can see, here I clicked on About us link, content is displaying properly but the active class still there in a Home link.

How to sort out this issue? I found this link:

How to change active class while click to another link in bootstrap use jquery?

but here the issue is not resolved. I tried every jQuery but it didn't work.

Code:

<nav class="navbar navbar-default navbar-static-top">

                        <div class="container-fluid">

                             <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                               </button>
                                <a class="navbar-brand" href="Default.aspx"><img src="images/layout/check1.png" style="width:310px;padding-left:82px;height:60px;" class="img-responsive" alt="dubaiexporters.com"/>
                                </a>
                          </div>
                      <div id="navbar2" class="navbar-collapse collapse">
                          <ul class="nav navbar-nav navbar-right">
                            <li class="active" style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
                            <li class="menu" style="font-family:Merriweather;"><a href="advertize.aspx">Advertise</a></li>                           
                            <li class="dropdown" style="font-family:Merriweather;">
                              <a href="exhibition.aspx" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li style="font-family:Merriweather;"><a href="dubaiexhibitions.aspx">Trade fairs in U.A.E</a></li>
                                   <li style="font-family:Merriweather;"><a href="exhibition.aspx">Trade fairs worldwide</a></li>
                                  <li style="font-family:Merriweather;"><a href="addexhibition.aspx">Add Your Event</a></li>             
                              </ul>
                            </li>
                              <li style="font-family:Merriweather;"><a href="subscribe.aspx">Subscribe</a></li>
                              <li style="font-family:Merriweather;"><a href="member_benefits.aspx">Memberships</a></li>
                              <li style="font-family:Merriweather;"><a href="aboutus.aspx">About us</a></li>
                              <li style="font-family:Merriweather;"><a href="news.aspx">News</a></li>
                              <li style="font-family:Merriweather;"><a href="contactus.aspx">Contact us</a></li>
                              <li style="font-family:Merriweather;"><a href="media_partners.aspx">Partners</a></li>
                              <li style="font-family:Merriweather;"><a href="login.aspx"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>


                         </ul>                      
                          <a href="addlisting.aspx" target="_blank" class="floatingbanner"></a>
                       </div>

      <!--/.nav-collapse -->
                  </div>
    <!--/.container-fluid -->



              </nav>

Jquery:

$(document).ready(function () {
            $('.nav li a').click(function (e) {
                $('.nav li.active').removeClass('active');
                var $parent = $(this).parent();
                $parent.addClass('active');
                //e.preventDefault();
            });
        });

jquery is client side. if you want to load the new page after you click it, the link will be re-loaded and the class removed. You will either have to ajax in the content of the new page, or use a server side language to add the class, or re-add the class on page load using jquery (I would recommend option 2) — Pete, Jul 31 '18 at 11:59
@Pete Is there any solution for this or any other link related to this issue? — chetan kambli, Jul 31 '18 at 12:01
[c# mvc example](https://stackoverflow.com/questions/20410623/how-to-add-active-class-to-html-actionlink-in-asp-net-mvc), [js example](https://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url) — Pete, Jul 31 '18 at 12:03
Possible duplicate of [How to keep active class when changing pages](https://stackoverflow.com/questions/29907609/how-to-keep-active-class-when-changing-pages) — Pete, Jul 31 '18 at 12:14

score 1 · Accepted Answer · answered Aug 01 '18 at 07:09

i have done it by using the code behind:

<li style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
                               <li id="test1" style="font-family:Merriweather;" runat="server"><a href="advertize.aspx">Advertise</a></li>                              
                            <li id="test2" class="dropdown" style="font-family:Merriweather;" runat="server">
                              <a href="exhibition.aspx" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li style="font-family:Merriweather;"><a href="dubaiexhibitions.aspx">Trade fairs in U.A.E</a></li>
                                   <li style="font-family:Merriweather;"><a href="exhibition.aspx">Trade fairs worldwide</a></li>
                                  <li style="font-family:Merriweather;"><a href="addexhibition.aspx">Add Your Event</a></li>             
                              </ul>
                            </li>
                              <li id="test3" style="font-family:Merriweather;" runat="server"><a href="subscribe.aspx">Subscribe</a></li>
                              <li id="test4" style="font-family:Merriweather;" runat="server"><a href="member_benefits.aspx">Memberships</a></li>
                              <li id="test5" style="font-family:Merriweather;" runat="server"><a href="aboutus.aspx">About us</a></li>
                              <li id="test6" style="font-family:Merriweather;" runat="server"><a href="news.aspx">News</a></li>
                              <li id="test7" style="font-family:Merriweather;" runat="server"><a href="contactus.aspx">Contact us</a></li>
                              <li id="test8" style="font-family:Merriweather;" runat="server"><a href="media_partners.aspx">Partners</a></li>
                              <li id="test9" style="font-family:Merriweather;" runat="server"><a href="login.aspx" runat="server"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

here i added id to li and runat="server"

Code Behind:

Page Load
{
       String activepage = Request.RawUrl;
        if (activepage.Contains("advertize.aspx"))
        {
            test1.Attributes.Add("class", "active");
        }
       else if (activepage.Contains("subscribe.aspx"))
        {
            test3.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("member_benefits.aspx"))
        {
            test4.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("aboutus.aspx"))
        {
            test5.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("news.aspx"))
        {
            test6.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("contactus.aspx"))
        {
            test7.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("media_partners.aspx"))
        {
            test8.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("login.aspx"))
        {
            test9.Attributes.Add("class", "active");
        }
}

Bhushan Kawadkar · Answer 2 · 2018-07-31T12:35:52.557

on click of menu, you are loading page which is specified in href attribute of anchor tag. hence added active class in clicked event handler will not hold true as page is refreshing. You can make use of localStorage and save index of clicked li and accordingly add active class. Try below jquery code

$(document).ready(function () {
            var index = localStorage.getItem('liIndex');
            if(index) {
               $('.nav li.active').removeClass('active');
               $('.nav li:eq(' + index + ')').addClass('active');
            }
            $('.nav li a').click(function (e) {
                var $parent = $(this).parent();
                localStorage.setItem('liIndex', $parent.index());
            });
        });

Same can be achieved using cookies, see below code

    function setCookie(key, value) {
      var expires = new Date();
      expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

$(document).ready(function () {
            var index = getCookie('liIndex');
            if(index) {
               $('.nav li.active').removeClass('active');
               $('.nav li:eq(' + index + ')').addClass('active');
            }
            $('.nav li a').click(function (e) {
                var $parent = $(this).parent();
                setCookie('liIndex', $parent.index());
            });
 });

have you tried same logic with cookies where you can store index of last clicked li parent and add / remove active class accordingly? — Bhushan Kawadkar, Jul 31 '18 at 12:27
i tried this but it dint worked.....now i am trying to do it by using code behind.. — chetan kambli, Aug 01 '18 at 05:08

How to change the active class when clicking on other link?

2 Answers2