How to apply CSS using jquery after page refresh ( Assing the CSS before refresh)

Question

on my Master page I am applying the CSS to selected link in the accordion panel. But once I click the button page getting refreshed and I am loosing my CSS. is there anyway we can still keep the class applied on the selected link ( or Highlight the selected link) after the page refresh?

 $(document).ready(function () {
            $('#accordian li').click(function () {
                var href = $(this).addClass("active1").children("a").attr("href");
            });
});

You could change just parts of the page or use localStorage. — Ciprianis
– Ciprianis, Commented Apr 28, 2016 at 4:10
I need to achieve this functionality in asp.net mvc master page. — user300485
– user300485, Commented Apr 28, 2016 at 4:14

or hor · Accepted Answer · 2016-04-29 07:03:43Z

2

try this

    $(document).ready(function() {
var key = 'clickedHref';
      $("#clearButton").click(function() {
        localStorage.setItem(key, null);
      });

      $('#accordian li').click(function() {
    $("#accordian li").removeClass("active1");
        var href = $(this).addClass("active1").children("a").attr("href");
        localStorage.setItem(key, href);
      });

      var clickedHref = localStorage.getItem(key);
      if (clickedHref !== null) {
        var a = $('#accordian li a[href="' + clickedHref + '"]');
        if (a.length) {
          a.trigger("click");
        }
      }
    });

css:

.active1 a{
  font-weight:bold;
}

html:

<ul id="accordian">
    <li>
        <a href="?a=1">a1</a>
    </li>
    <li>
        <a href="?a=2">a2</a>
    </li>
</ul>
<button id='clearButton'>clear</button>

http://codepen.io/anon/pen/vGVjjP

edited Apr 29, 2016 at 7:03

answered Apr 28, 2016 at 5:27

or hor

7233 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user300485 Over a year ago

Thank you. I am getting undefined after the page refresh.

Ericc Antunes · Accepted Answer · 2016-04-29 05:54:24Z

-1

Using "preventDefault()" not solve your case?

$('#accordian li').click(function(e) {
e.preventDefault();
var href = $(this).addClass("active1").children("a").attr("href");
});

answered Apr 29, 2016 at 5:54

Ericc Antunes

192 bronze badges

Collectives™ on Stack Overflow

How to apply CSS using jquery after page refresh ( Assing the CSS before refresh)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest