在页面加载/重新加载时设置 Jquery ui 活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15421669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Jquery ui active tab on page load/reload
提问by user1405736
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.
我正在使用工作正常的 Jquery UI 选项卡的基本实现，但我想根据用户操作动态设置（或重置）活动选项卡。
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?
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?
如何根据查询字符串值设置活动选项卡？使用我之前的选项卡解决方案，我能够传递一个查询字符串值并在页面加载时设置活动选项卡。（由于其他技术挑战，我不得不放弃这个旧的解决方案。）
当用户在我的浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时，我如何才能将焦点保持在他们按下保存之前所在的选项卡上？
当用户返回浏览器应用程序的任务页面时，如何设置活动选项卡？例如，在我的 Web 应用程序中，如果用户浏览到“项目”页面然后返回到“任务”页面，我该如何重置他们之前所在的选项卡？
Javascript:
Javascript：
$(function() {
$("#tabs").tabs();
});
HTML Example code:
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>
回答by user1405736
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.
经过额外的研究和反复试验，我解决了我自己的 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>
Here's how I answered each of my previous questions.
这是我如何回答我之前的每个问题。
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:
1. 如何根据查询字符串值设置活动选项卡？我最终不需要使用查询字符串。我将#tabs-x 添加到我的 url 末尾。例如，如果我想要一个直接指向 Tab 3 的链接，我将链接编码为：
localhost:8080/pm/detail?prjID=2077#tabs-3
2. 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?
2. 当用户在我的浏览器应用程序中选择“保存”按钮，并且浏览器页面重新加载时，我如何才能将焦点保持在他们按下保存之前所在的选项卡上？
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.
我通过捕获点击事件，获取当前标签索引，然后设置一个隐藏的表单元素“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. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?
3. 当用户返回浏览器应用程序的项目页面时，如何设置活动选项卡？例如，在我的 Web 应用程序中，如果用户浏览到任务页面然后返回到项目页面，我如何重置他们之前所在的选项卡？
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.
这是通过在我的 Java Servlet 中设置会话变量来存储隐藏的表单元素“currentTab”来解决的。这样，当我返回 Project 页面时，我可以像在 Save forms 操作中设置它一样重置“currentTab”值。
I hope this example can help someone else with their jQuery tab issues!
我希望这个例子可以帮助其他人解决他们的 jQuery 选项卡问题！
回答by Erica Xu
回答by Prianca
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
Note: Where Sel_tab is hidden field. onclick on tabs achor link assign value to hidden feild
注意：其中 Sel_tab 是隐藏字段。onclick 选项卡 achor 链接将值分配给隐藏的字段
