单击链接打开页面后，在页面中显示隐藏的div

Question

我有一个HTML页面，单击按钮后在其中可以看到隐藏的div。 像这样：

$('#display').click(function(){
    $('#itemList').removeClass('hide');
    ...
})

在另一个页面上，有一个链接，单击该链接'itemList'用户带回到上一个页面，并且该页面上id = 'itemList'的元素必须变为可见。 代码是这样的：

<a href='firstHTML.php'> View items</a>

我不确定要添加到代码中的其他内容如何使其他页面显示为先前隐藏的元素。 有人可以帮忙吗？

Answer 1

最有可能的解决方案之一是localStorage。在这里，您还可以实现Cookies或字符串查询，以将值传递给其他页面。

我正在显示localstorage的用法，您可以在单击锚点时将id存储在localStorage中，如下所示

<a href='firstHTML.php' data-showId='itemList'> View items</a>

现在在锚点上绑定事件

$("[data-showId]").bind('click',function(){
    var idToShow=$(this).attr('data-showId');
    if(idToShow)
      store('visibleId', idToShow);
});

现在，您只需定义这些功能。

   function setup() {
        var tmp = get('visibleId');
        if (tmp)
          showDiv(tmp);
    } 
    function showDiv(cls) {
        $("#"+cls).removeClass('hide');
    }
    function get(name) {
        if (typeof (Storage) !== "undefined") {
          return localStorage.getItem(name);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
          localStorage.setItem(name, val);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }

现在在准备好dom的情况下调用setup（）。

Answer 2

首先，我将使用jQuery函数隐藏/显示列表，而不是使用自己的CSS类：

$('#display').click(function(){
    $('#itemList').show();
    ...
})

然后，针对您的问题的一种可能方法是为此使用get Parameter，例如：

<a href='firstHTML.php?list=show'> View items</a>

和jQuery

1. 创建一个辅助函数（取自Get url参数jquery或如何获取js中的查询字符串值 ）：

    $.urlParam = function(name) { var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results==null){ return null; }else{ return results[1] || 0; } } 

2. 读出属性：

    var listStatus = $.urlParam('list'); 

3. 取消隐藏列表，以防显示：

    $( document ).ready(function() { if(listStatus == 'show') { $('#itemList').show(); } });