gpt4 book ai didi

javascript - 在页面加载/重新加载时设置 Jquery ui 事件选项卡

转载 作者:数据小太阳 更新时间:2023-10-29 04:07:18 26 4
gpt4 key购买 nike

我正在使用运行良好的 Jquery UI 选项卡的基本实现,但我想根据用户操作动态设置(或重置)事件选项卡。

  1. 如何根据查询字符串值设置事件选项卡?使用我之前的选项卡解决方案,我能够传递查询字符串值并在页面加载时设置事件选项卡。 (由于其他技术挑战,我不得不放弃这个旧的解决方案。)

  2. 当用户在我的浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时,我如何才能将焦点保持在他们按下保存之前所在的选项卡上?

  3. 当用户返回浏览器应用程序的“任务”页面时,如何设置事件选项卡?例如,在我的 Web 应用程序中,如果用户浏览到“项目”页面然后返回到“任务”页面,我该如何重置他们之前所在的选项卡?

Javascript:

$(function() {
$("#tabs").tabs();
});

HTML 示例代码:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>

<div id="tabs-1">
<p>Description content</p>
</div>

<div id="tabs-2">
<p>Action content</p>
</div>

<div id="tabs-3">
<p>Resources content</p>
</div>

<div id="tabs-4">
<p>Settings </p>
</div>

</div>

最佳答案

经过进一步研究和反复试验,我解决了自己的 jQuery 选项卡问题。这是一个工作示例。我不知道这是否是最优雅的解决方案,但它确实有效。我希望这会有所帮助。

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({active: document.tabTest.currentTab.value});

$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
</script>
</head>

<body>
<form name="tabTest" method="post" action="tab">
<!-- default tab value 2 for Tab 3 -->
<input type="hidden" name="currentTab" value="2"/>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">Tab 1 Content</div>
<div id="tabs-2">Tab 2 Content</div>
<div id="tabs-3">Tab 3 Content</div>
</div>
</form>
</body>

以下是我对之前每个问题的回答。

<强>1。如何根据查询字符串值设置事件选项卡?我最终不需要使用查询字符串。我将#tabs-x 添加到我的网址末尾。例如,如果我想要一个直接指向选项卡 3 的链接,我将链接编码为:

localhost:8080/pm/detail?prjID=2077#tabs-3

<强>2。当用户在我的浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时,我如何才能将焦点保持在他们按下保存之前所在的选项卡上?

我通过捕获点击事件、获取当前选项卡索引然后设置隐藏表单元素“currentTab”来存储当前选项卡值来解决此问题。然后返回到 Java Servlet 中,我检索了隐藏的表单元素并在页面重新加载时将其重置。

$(document).ready(function() {
// Set active tab on page load
$("#tabs").tabs({active: document.tabTest.currentTab.value});

// Capture current tab index. Remember tab index starts at 0 for tab 1.
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});

<强>3。当用户返回到我的浏览器应用程序的项目页面时,如何设置事件选项卡?例如,在我的 Web 应用程序中,如果用户浏览到“任务”页面然后返回到“项目”页面,我该如何重置他们之前所在的选项卡?

这通过在我的 Java Servlet 中设置一个 session 变量来存储隐藏的表单元素“currentTab”来解决。这样,当我返回“项目”页面时,我可以像在“保存表单”操作中设置它一样重置“currentTab”值。

我希望这个示例可以帮助其他人解决他们的 jQuery 选项卡问题!

关于javascript - 在页面加载/重新加载时设置 Jquery ui 事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15421669/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com