用例: 我有一个在 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/