0

本质上，我在一个元素上默认使用 display: none ，然后在单击不同标题后使用 javascript 将隐藏元素切换到另一个元素。现在我的实现完美无缺。

唯一的问题是，当您重新加载页面时，它会返回默认值，而不是保持原样。

这段代码中发生的事情是我使用函数 hideUnhide 绑定隐藏元素的标题。单击它时，我隐藏当前元素，显示先前隐藏的元素，然后设置标题的 css 以使隐藏的元素看起来像链接，而显示的元素看起来像标题。

$(document).ready(function() {
    var unclicked = $('.unclickedTeam');
    unclicked.bind("click", hideUnhide);
});

function hideUnhide() {
    var unclicked = $('.unclickedTeam');
    var clicked = $('.currentTeam');
    var displayedTeam = $('.displayedTeam');
    var hiddenTeam = $('.hiddenTeam');

    displayedTeam.css('display', 'none');
    hiddenTeam.css('display', 'block');

    displayedTeam.addClass('hiddenTeam');
    displayedTeam.removeClass('displayedTeam');

    hiddenTeam.addClass('displayedTeam');
    hiddenTeam.removeClass('hiddenTeam');

    unclicked.addClass('currentTeam');
    unclicked.removeClass('unclickedTeam');

    clicked.addClass('unclickedTeam');
    clicked.removeClass('currentTeam');

    unclicked.unbind();
    clicked.bind("click", hideUnhide);
}

我怎样才能按原样保存状态？除了使它们成为两个单独的页面之外，当单击标题时它们会相互跳转。

4

2 回答 2

3

您可以使用 localStorage 来存储以前的状态。

localStorage.setItem("hide", "yes"); // Set state

if(localStorage.getItem("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

LocalStorage 与大多数浏览器兼容。见：http ://www.html5rocks.com/de/features/storage

浏览器兼容性 WebStorage

如果您想确定您也可以使用 Cookie 和 JavaScript。
你可以使用这个 JS 函数来创建/删除 cookie：

function setCookie(name,value,mins) {
    var expires = "";
    if (mins) {
        var date = new Date();
        date.setTime(date.getTime()+(mins*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

以下是如何使用 JavaScript 的示例：

setCookie("hide", "yes", 43200); // Set state (expire in 30 days)

if(getCookie("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

测试了两个，工作。

于 2013-03-11T09:05:09.133 回答
1

您可以使用localStorage保存页面的状态，例如，像这样

window.localStorage.setItem( 'stateTeam1', 'hidden' );

您的代码总体上需要添加两个：

  1. 在该hideUnhide方法中，您需要更新localStorage.
  2. 在页面加载时，您必须从中提取状态localStorage并应用属性集。

浏览器支持非常好，如caniuse 所示。

于 2013-03-11T08:59:31.277 回答