我制作了一个切换菜单,我必须在页面刷新后保存该状态。
在该菜单中有三个步骤。首先选择运动。 选择国家/地区后。最后选择联赛。
现在,在联盟中,<li>
标记为<a>
。所以我真正想要的是当有人选择我的li标签时,li在重定向后应该是橙色。
但是当用户选择li并且我的页面是重定向且所有li看起来都是相同的颜色时。
这是 Fiddle 。
这是我的剧本。
$(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);
});
});
});
答案 0 :(得分:1)
首先在没有JS的情况下构建它,然后添加JS并使用一些pushState魔法来正确地映射支持它的浏览器的URL。