單擊鏈接打開頁面后，在頁面中顯示隱藏的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(); } });