在页面加载/重新加载时设置Jquery ui活动选项卡 [英] Set Jquery ui active tab on page load/reload
问题描述
我正在使用Jquery UI选项卡的基本实现，它们工作正常，但我想根据用户操作动态设置（或重置）活动选项卡。
I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.
-
如何根据查询字符串值设置活动标签？使用我之前的选项卡解决方案，我能够传递查询字符串值并在页面加载时设置活动选项卡。 （由于其他技术挑战，我不得不放弃这个旧解决方案。）
How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
当用户在我的浏览器应用程序中选择保存按钮，并且浏览器页面重新加载时，如何在按下保存之前将注意力集中在他们所处的选项卡上？
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
当用户返回任务页面时，如何设置活动选项卡我的浏览器应用程序？例如，在我的Web应用程序中，如果用户浏览到项目页面然后返回任务页面，我该如何重置之前的选项卡？
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?
Javascript：
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标签问题反复试验。这是一个有效的例子。我不知道这是否是最优雅的解决方案，但它有效。我希望这会有所帮助。
I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.
<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>
以下是我如何回答我以前的问题。
Here's how I answered each of my previous questions.
1。如何根据查询字符串值设置活动选项卡？
我最终不需要使用查询字符串。我将＃tabs-x添加到我的网址末尾。例如，如果我想直接链接到Tab 3，我将链接编码为：
1. How can I set the active tab based on a querystring value? I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:
localhost:8080/pm/detail?prjID=2077#tabs-3
2。当用户在浏览器应用程序中选择保存按钮并重新加载浏览器页面时，如何在按下保存之前将焦点保持在他们所在的选项卡上？
我通过捕获click事件，获取当前选项卡索引然后设置隐藏的表单元素currentTab来存储当前选项卡值来解决这个问题。然后回到Java Servlet中，我检索了隐藏的表单元素，并在页面重新加载时重置它。
I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.
$(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中设置一个会话变量来存储隐藏的表单元素currentTab来解决的。这样，当我返回Project页面时，我可以像在Save forms action中设置它一样重置currentTab值。
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.
我希望这个例子可以帮助其他人的jQuery标签问题！
I hope this example can help someone else with their jQuery tab issues!
这篇关于在页面加载/重新加载时设置Jquery ui活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
