Question

基本上我在一个元素上默认使用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);
}

如何保存状态？除了使它们成为两个单独的页面，当单击标题时它们会相互跳转。

Answer 1

您可以使用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

如果你想确定你也可以使用Cookies和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
}

同时测试，工作。

Answer 2

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

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

您的代码总体上需要两个补充：

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

浏览器支持非常好，可以是seen at caniuse。

显示后如何保存状态：无？页面重新加载后防止重置

2 个答案: