Question

不知道如何正确地提出问题标题！我有一个按钮点击显示的div。问题是，如果用户转到下一页（通过单击另一个按钮）然后返回到旧页面，则不显示div，因为页面已刷新，因此用户需要再次单击该按钮才能看到div。

第一次点击按钮后是否有办法保持div显示？

<div id="tableDiv" style="display:none;" >
<table>
   <td>something</td>
</table>
</div>

<input type="button" value="Show" onClick="showTable()"/>

<script type="text/javascript">         
   function showTable() {
       document.getElementById('tableDiv').style.display = "block";
   }                
</script>

Answer 1

您可以使用html5 webStorage：

localStorage未过期，而sessionStorage在浏览器关闭时被删除（两者的使用相同）。 webStorage支持所有主流浏览器和IE＆gt; = 8

普通Javascript

function showTable() {
   document.getElementById('tableDiv').style.display = "block";
   localStorage.setItem('show', 'true'); //store state in localStorage
}

并检查状态onLoad：

window.onload = function() {
    var show = localStorage.getItem('show');
    if(show === 'true'){
         document.getElementById('tableDiv').style.display = "block";
    }
}

<强>的jQuery

function showTable() {
    $('#tableDiv').show();
    localStorage.setItem('show', 'true'); //store state in localStorage
}

$(document).ready(function(){
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#tableDiv').show();
    }
});

Demo

P.S。要从localStorage中删除项目，请使用

localStorage.removeItem('show');

<强>参考

webStorage

Answer 2

使用localstorage保存状态

<script type="text/javascript">         
   function showTable() {
       document.getElementById('tableDiv').style.display = "block";
       localStorage.setItem('showTable', true);  //set flag   
   }

   function hideTable() {
       document.getElementById('tableDiv').style.display = "none";
       localStorage.removeItem('showTable');  //remove key   
   }

   if (localStorage.getItem('showTable')) {  //see if flag is set (returns undefined if not set)
       showTable();   //if set show table
   }
</script>

Answer 3

我认为您最好的选择是使用location.hash作为JavaScript路由器。基本上修改散列，监视散列更改，如果散列等于特定值做某事。然后当使用的离开并点击＆＃34; back＆＃34;时，它们将返回到具有前一个散列的页面，在这种情况下，您可以检测它们所在的页面版本并重新创建它。

<div id="tableDiv" style="display:none;" >
  <table>
    <td>something</td>
  </table>
</div>
<input type="button" value="Show" onClick="showTable()"/>

<script type="text/javascript">
  function showTable(){
    location.hash = "#show"; // sets hash to #show, which will fire onhaschange event which its handler is hashRouter()
  }
  function hashRouter(){
    if(window.hash == "#show"){ // shows table if hash is #show
      document.getElementById('tableDiv').style.display = "block";
    }
  }
  window.onhashchange = hashRouter; // Calls when hash is changed.
  window.onload = hashRouter; // Calls when page loads;
</script>

还有许多其他选项，例如cookies或localstorage。

查看此插件：

https://github.com/addcms/addHashRouter

使用此解决方案，您可能会执行以下操作：

<强> HTML

<div id="tableDiv" style="display:none;">
  <table>
    <td>something</td>
  </table>
</div>
<a href='#show'>Show Table</a>

<强>的JavaScript

$add.UI.hashRouter.add("show", function(){
    document.getElementById('tableDiv').style.display = "block";
});

然后如果他们点击＆＃34;后退按钮＆＃34;离开页面后，它仍然会出现，如果他们在显示表格后点击后退按钮，它将不会重新隐藏＆＃34;它，除非你添加了这个：

<强> HTML

<a href='#hide'>Hide Table</a>

<强>的JavaScript

$add.UI.hashRouter.add("hide", function(){
    document.getElementById('tableDiv').style.display = "none";
});

然后您可以在浏览器导航中使用显示/隐藏按钮。

Answer 4

使用@ DustinPoissant的回答，我做了一些更简单的事情。

您可以使用选择器:target为元素设置样式，并为您保存一些代码。

像这样：

<style>
    #tableDiv {display:none;}
    #tableDiv:target {display:block!important;}
</style>

<div id="tableDiv">
    <table>
        <tr>
            <td>something</td>
        </tr>
    </table>
</div>

<input type="button" value="Show" onClick="showTable()"/>
<input type="button" value="Hide" onClick="hideTable()"/>

<script type="text/javascript">
   function showTable() {
       location.hash='tableDiv';
   }
   function hideTable() {
       location.hash='';
   }
</script>

当地址上的“哈希”与该元素的ID匹配时，:target选择器将匹配。

Answer 5

你可以用cookie来实现它。这是一个很好的轻量级jquery cookie plugin。

所以设置一个cookie：

$.cookie("var", "10");

获取cookie：

$.cookie("var");

删除cookie：

$.cookie("var", null);

现在您可以执行以下操作：

function showTable() {
    document.getElementById('tableDiv').style.display = "block";
    $.cookie("var", "1");
}

function leaveButtonOpen(){
    if($.cookie("var") == 1){
        document.getElementById('tableDiv').style.display = "block";
    }
}

show display：刷新后没有div

5 个答案: