Question

我下面有一些工作代码，根据点击的两个按钮显示两个div。在每个div里面我都有一个刷新按钮。

当我单击这些按钮中的任何一个时，我希望页面重新加载（它当前正在执行）但我希望它加载单击该按钮的保存div。我需要改变什么来使这项工作？

https://jsfiddle.net/Jaron787/qsbv50ff/3/

<center><img src='http://www.rdesignonline.com/blog/wp-content/uploads/2007/10/circle-plain.gif' usemap="#lsetmap" id="" alt="" /></center>
<map id="lsetMap" name="lsetmap">
  <area shape="circle" coords="96,77,40" href="#" alt="" item="div1" />
  <area shape="circle" coords="238,77,40" href="#" alt="" item="div2" />
</map>

<div id="div1" class="display">
  <table id="tblData" class="TSS">
    <tr>
      <td>### Some Table Data in Green Button ###</td>
    </tr>
  </table>
  <input Type="button" VALUE="Reload Page" onClick="history.go(0)">
</div>

<div id="div2" class="display">
  <table id="tblData" class="TSS">
    <tr>
      <td>### Some Table Data in Red Button ###</td>
    </tr>
  </table>
  <input Type="button" VALUE="Reload Page" onClick="history.go(0)">
</div>

脚本

$(".display").hide();
$('[item]').click(function() {
  var item = $(this).attr('item');
  $(".display").hide();
  $("#" + item).show();
  return false;
});

Answer 1

使用sessionStorage在sessionStorage.setItem中设置状态，并使用load
在sessionStorage.getItem页面上获取状态

＆＃13;

// Consider "Uncaught SecurityError: Failed to read the 'sessionStorage'
// property from 'Window': The document is sandboxed and lacks the 'allow-same-origin'
// flag" while executing this snippet

$(".display").hide();
$('[item]').click(function() {
  var item = $(this).attr('item');
  sessionStorage.setItem('item', item);
  $(".display").hide();
  $("#" + item).show();
  return false;
});

var item = sessionStorage.getItem('item');
if (item) {
  $("#" + item).show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<center>
  <img src='http://www.rdesignonline.com/blog/wp-content/uploads/2007/10/circle-plain.gif' usemap="#lsetmap" id="" alt="" />
</center>
<map id="lsetMap" name="lsetmap">
  <area shape="circle" coords="96,77,40" href="#" alt="" item="div1" />
  <area shape="circle" coords="238,77,40" href="#" alt="" item="div2" />
</map>

<div id="div1" class="display">
  <table id="tblData" class="TSS">
    <tr>
      <td>### Some Table Data in Green Button ###</td>
    </tr>
  </table>
  <input Type="button" VALUE="Reload Page" onClick="history.go(0)">
</div>

<div id="div2" class="display">
  <table id="tblData" class="TSS">
    <tr>
      <td>### Some Table Data in Red Button ###</td>
    </tr>
  </table>
  <input Type="button" VALUE="Reload Page" onClick="history.go(0)">
</div>

＆＃13;

HTML JavaScript继续在页面重新加载

1 个答案:

Fiddle Demo