Question

我有一个页面（参见图片说明），用户必须选择几个选项。 page description

这个想法是，您首先点击顶部框中的链接。然后在搜索框中输入一个字符串，该字符串将显示div1中的相关链接。当您单击div1中的链接时，相关链接将显示在div2中。然后，在点击div2中的链接后，您将获得div3中的结果。

我使用ajax / javascript为div1和2创建链接并获取div3的结果。问题是，当我点击我页面上的任何链接时，搜索框将被清除，div1，div2和搜索框中的内容将消失，即使下一步（例如显示下一个链接）将成功执行。

我该怎么做才能防止这种情况并保留搜索框div1和div2的内容？

我目前的html代码：

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="icon" type="image/png" href="img/favicon.png">
      <script src="inc/OnlineLogs.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <title>Logs</title>
  </head>
  <body onload="getOnlineIds()">
      <div class="main">
          <div class="navigation">
              <a href="?loc=bad">bad</a> • 
              <a href="?loc=erf">erf</a> • 
              <a href="?loc=ess">ess</a> • 
              <a href="?loc=ffb">ffb</a> • 
              <a href="?loc=goe">goe</a> • 
              <a href="?loc=hal">hal</a> • 
              <a href="?loc=ham">ham</a> • 
              <a href="?loc=jen">jen</a> • 
              <a href="?loc=koe">koe</a> • 
              <a href="?loc=lei">lei</a> • 
              <a href="?loc=mue">mue</a> • 
              <a href="?loc=rau">rau</a> • 
              <a href="?loc=wil">wil</a> • 
              <a href="?loc=wit">wit</a>
          </div>
          <div class="search">
              Suche: <input type="text" id="input" onkeyup="getOnlineComms()">
          </div>
          <div class="onlines" id="onlinelist"></div>
          <div class="ids" id="ids"></div>
          <div class="log" id="log"></div>
       </div>
   </body>
</html>

另请看一下这个小提琴：http://jsfiddle.net/X7aXG/1/

编辑：我编辑了问题说明。单击任何链接将删除div1，div2和搜索框的内容，即使下一步将被执行。

Answer 1

您的链接不仅仅是＃34;在网址中添加参数＆＃34;，它们会更改查询参数，这需要服务器请求，这将刷新整个页面。

如果您想要避免刷新页面但仍希望更改网址（以使其可以记录），您可以将位置存储在网址哈希中（即代替?foo=bar使用#foo=bar）

有许多库（see this discussion for some）可以帮助管理页面的哈希状态并对哈希中的更改做出反应。

Answer 2

在运行AJAX获取链接列表1的脚本之前，请检查是否

$('#input').val() != ""

加载新页面时保留内容

2 个答案: