javascript - 有没有办法确定用户在网页中查看了哪些 div,并在他们重新提交页面后返回到同一个 div?

标签 javascript jquery html css jsp

用例: 我有一个在 html 表单中包含多个 div 的 jsp 页面。 (div1) 中的默认 View 必须在首次加载页面时显示(div2 和 div3 被隐藏)。在初始页面加载时,每个 div 包含从数据库查询返回的不同字段数据。实现了切换功能以显示/隐藏 div 并由用户的选择 View 首选项触发。用户再次提交表单后,jsp向每个div返回额外的数据。

问题: 我需要一种方法让网页识别用户正在查看哪个 div 并在他们绕过默认 View 重新提交另一个数据库查询后返回到页面中的相同 div (分区 1)。

非常感谢对此的任何帮助!

下面是我正在测试的摘录:

$(function() {
  $('#div1').click(function() {
    $('.div1').toggle(700);

    if ($('.div1').is(':visible')) {
      $('.div2').hide();
      $('.div3').hide();
    }
    return false;
  });

  $('#div2').click(function() {
    $('.div2').toggle(700);

    if ($('.div2').is(':visible')) {
      $('.div1').hide();
      $('.div3').hide();
    }
    return false;
  });

  $('#div3').click(function() {
    $('.div3').toggle(700);

    if ($('.div3').is(':visible')) {
      $('.div1').hide();
      $('.div2').hide();
    }
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <li>
    <a href="#" id="div1">Default Query View 1 Data</a>
  </li>
  <li>
    <a href="#" id="div2">Query View 2 Data</a>
  </li>
  <li>
    <a href="#" id="div3">Query View 3 Data</a>
  </li>
</nav>

<body>
  <form id="jdform" name="jdform" method="post" action="testDivToggle.html">

    <div id="div1" class="div1" style="display: block;">
      <p>Default Data for View 1 query: field1,field2</p>
    </div>

    <div id="div2" class="div2" style="display: none;">
      <p>Queried Data from View 2 query: field3,field4,field5</p>
    </div>

    <div id="div3" class="div3" style="display: none;">
      <p>Queried Data from View 3 query: field6,field7</p>
    </div>

    <input type="submit" name="submit" value="submit" />
  </form>
</body>

最佳答案

如果您想保持简单,只需在用户单击/打开 div 时将 div 编号保存在 cookie 中。然后,当您重新加载页面时,根据该 cookie 值启用 div。如果您不设置过期时间,则当用户关闭浏览器时,cookie 将消失,我认为这对您来说应该没问题。在你的每个点击函数中做这样的事情:

$('#div1').click(function() {
    $('.div1').toggle(700);

    if ($('.div1').is(':visible')) {
      document.cookie="divnum=1";
      $('.div2').hide();
      $('.div3').hide();
    }
    return false;
  });

然后在加载页面时检查是否有“divnum”cookie,如果有,打开那个 div 而不是默认的。

关于javascript - 有没有办法确定用户在网页中查看了哪些 div,并在他们重新提交页面后返回到同一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35734988/

相关文章:

iphone - iOS NSXML 解析未格式化的 HTML

javascript - React/Redux 无法读取未定义的属性 "currentOpportunities"

javascript - 使卡片和图像大小相同——我如何使用 CSS 做到这一点?

javascript - Angular 2 RC5 |路由器 : Cannot match any routes

javascript - jQuery 自动完成插件在 ajax 加载的内容中不起作用

javascript - 如何在ckeditor中使用keyup

android - 应用程序在手机和 ripple 中的渲染不同

javascript - downloadUrl 函数不适用于使用 opencart 创建谷歌地图定位器

javascript - jQuery 点击函数传递参数

html - 使用CSS旋转发光图像