CODEWITHSUNDEEP
jqueryhtml
wasim kazi
wasim kazi

Reputation: 378

Keep the color of selected <li>'s a tag after page refresh

I made one toggle menu in which I have to save that state after page refresh.

In that menu there are three step. First select sport. After select country. And at end select league.

Now in this league there is a <li> with <a> tag. So What I exactly want is when someone select my li tag so that li should be in orange color after redirect.

but when user select that li and my page is redirect and all li looks in same color.

Here is my Fiddle.

here is my script.

$(document).ready(function() {
 var $jq = jQuery.noConflict();
 $jq(document).ready(function(){
 $jq(".widget2").hide();
 $jq(".inner").hide();

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

var widget2 = $jq(".widget2");
var box2 = $jq(".box2");
if (getCookie('box2id') || getCookie('box1text')) {
    var text = getCookie('box1text');        
    var id = getCookie('box2id');
     $jq('#' + id).addClass("disable");
     $jq('#' + id).next().slideDown(600, function() {  
     $jq('.box:contains('+text+')').next('.inner').slideDown(500);
     jq('.box:contains('+text+')').next('.inner').css('color', 'green');    
    });
} else {
    $jq(".widget2").hide();
    $jq(".inner").hide();
}

box2.click(function() {
    $jq(this).next(widget2).slideToggle(200);
    $jq(".widget2").not($jq(this).next(widget2)).stop(true, false).slideUp();
     var box2ID = $jq(this).attr('id');
     $jq(this).add(".disable").toggleClass("disable");
     setCookie('box2id', box2ID);        
  });

$jq(".box").click(function() {
    $jq(this).next(".inner").slideToggle(200);
    var box1TX = $jq(this).text();
    setCookie('box1text', box1TX);         
});
});

});​

Upvotes: 0

Views: 418

Answers (1)

George
George

Reputation: 2950

First build it without JS, then add the JS and use some pushState magic to map the URLs correctly for browsers that support it.

Upvotes: 1

Related Questions