CODEWITHSUNDEEP
jqueryhtmlcss
avdnowhere
avdnowhere

Reputation: 177

How to change background of <li> tag when <a> tag click and page reload?

I am trying to change background of <li> tag when <a> tag inside clicked. I was referring to this answer

But, the problem is the page is reload and remove the dom. After I click, the <li> background will change, but it will dissapear again when page finish reload.

My code are as below:

<li id="HowItWorks" runat="server">
     <a href="<%= GlobalUtility.ApplicationPath() %>/Portal/HowItWorks">
          <%--<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>--%>
          <asp:Label ID="HowItWorksLabel" meta:ResourceKey="HowItWorksLabel" runat="server" />
     </a>
</li>

My script are as below:

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

Upvotes: 0

Views: 781

Answers (5)

Phaze Phusion
Phaze Phusion

Reputation: 992

If I understand correctly you want the 'active' link to be highlighted after the 'active' page has loaded? If you change your HTML so that none of the <li> elements have the active class and their ids reflect the URL to where they're pointing. Then use:

$(function () {

  var pathArray = window.location.pathname.split( '/' );
  var activeId = pathArray[pathArray.length-1];

  $('#'+activeId).addClass('active');

});

So each time a new page loads it gets the last part of the URL "HowItWorks" from ".../Portal/HowItWorks". Then jQuery adds the active class to the element with the matching ID.

Upvotes: 0

Emre Rothzerg
Emre Rothzerg

Reputation: 106

please use preventDefault for this. it's the best and simplest way to do it

 $("li a").click(function (event) {
   event.preventDefault();
   $("li").removeClass("active");
   $(this).parent().addClass("active"); // active class, with the new background color
 });

Upvotes: 0

silver
silver

Reputation: 5311

Since your click event do page reload, all your DOM modification will be gone and it will remove the active class on li element modified using jquery,

you can try using cookie and set the current ID of li that is click then assign active class to it after page load,

I didn't bother explaining it much, some of the code is from w3schools

( function($) {

    // Get current Time + 1 hour
    var now = new Date();
    var time = now.getTime();
    time += 3600 * 1000;
    now.setTime(time);

    // function to get cookie value
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }


    var active = getCookie("link_clicked");

    //check if cookie is empty
    if ( active === "" ) {

        // if cookie is emtpy assign active class on li current click
        $('li').click( function() {

            var id = $(this).attr('id');

            $('li').removeClass('active');

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

            //set Cookie with current unique id  expires in 1 hour
            document.cookie = "link_clicked="+ id +"; expires=" + now.toUTCString() + "; path=/";
        });

    } else {
        // if cookie found assign active class to the ID set on cookie
        $('#' + active ).addClass('active');

    }

})(jQuery);

Upvotes: 0

user5284713
user5284713

Reputation:

If you are still looking for an example check this one out.

$(function () {
    $("a").bind('click', function(evt){
        $(evt.target).parent().removeClass("bg1");
        $(evt.target).parent().addClass("bg2");
    });
});
li{
    display: inline-block;
}
a{
    display: inline-block;
    color: #fff;
}
.bg1{
    background-color: #00F;
}

.bg2{
    background-color: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul>
    <li class="bg1">
    	<a href="#" >Link</a>
    </li>
</ul>

https://jsfiddle.net/ypyd021r/2/

Upvotes: 0

CollinD
CollinD

Reputation: 7573

Try this

$(function () {
        $("li").click(function (e) {
            e.preventDefault(); // <--- pretend we never clicked a link
            $("li").removeClass("active");
            $(this).addClass("active");
        });
    });

Upvotes: 1

Related Questions