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

【问题标题】：Show hidden div in page after clicking link to open the page单击链接打开页面后在页面中显示隐藏的 div
【发布时间】：2015-09-21 11:38:17
【问题描述】：

我有一个 HTML 页面，其中一个隐藏的 div 在单击按钮时变得可见。像这样的：

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

在另一个页面上，有一个链接，当单击该链接时，用户会返回到先前的页面，并且该页面上具有 id='itemList' 的元素必须变得可见。代码是这样的：

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

我不确定在代码中添加什么其他内容以使其他页面显示之前隐藏的元素可见。有人可以帮忙吗？

【问题讨论】：

$('#itemList').addClass('hide') 锚点点击
您很可能必须使用在页面中持续存在的全局变量，或者您必须使用 URL 参数。
你可以将你的值写入cookies

标签： javascript jquery html css

【解决方案1】：

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

我正在展示 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()..

【讨论】：

localStorage 是解决这个问题的好方法。不过，我不提倡旧浏览器的警报。最好不支持此功能，而不是强加不必要的用户要求。

【解决方案2】：

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

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

那么，解决您的问题的一种可能方法是为此使用 get 参数，例如：

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

还有 jQuery

创建一个辅助函数（取自Get url parameter jquery Or How to Get Query String Values In js）：

$.urlParam = function(name) {

  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

  if (results==null){
    return null;
  }else{
   return results[1] || 0;
  } 
}

读出属性：
```
var listStatus = $.urlParam('list');
```

取消隐藏列表以防它应该显示：

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

【讨论】：