在页面加载/重新加载时设置Jquery ui活动选项卡
[英]Set Jquery ui active tab on page load/reload
问题描述
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>
3 个解决方案
解决方案1
13 已采纳 2013-03-21 14:07:54
I solved my own jQuery tab issues after additional research and trial and error. 经过额外的研究和反复试验后，我解决了自己的jQuery选项卡问题。 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. How can I set the active tab based on a querystring value? 1.如何根据查询字符串值设置活动选项卡？ I ended up not needing to use a querystring. 我最终不需要使用查询字符串。 I added the #tabs-x to the end of my url. 我将＃tabs-x添加到我的网址末尾。 For example, if I wanted a link directly to Tab 3 I coded a link as: 例如，如果我想直接链接到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. 我通过捕获click事件，获取当前选项卡索引，然后设置隐藏的表单元素“currentTab”来存储当前选项卡值来解决这个问题。 Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads. 然后回到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? 3.当用户返回浏览器应用程序的“项目”页面时，如何设置活动选项卡？ 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? 例如，在我的Web应用程序中，如果用户浏览“任务”页面然后返回“项目”页面，我该如何重置之前使用的选项卡？
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". 这可以通过在我的Java Servlet中设置一个会话变量来存储隐藏的表单元素“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. 这样，当我返回Project页面时，我可以重置“currentTab”值，就像我在Save forms action中设置它一样。
I hope this example can help someone else with their jQuery tab issues! 我希望这个例子可以帮助其他人解决他们的jQuery选项卡问题！
解决方案2
0 2013-03-14 23:02:26
解决方案3
0 2015-02-18 17:44:25
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
Note: Where Sel_tab is hidden field. 注意：Sel_tab是隐藏字段的位置。 onclick on tabs achor link assign value to hidden feild onclick on tabs achor link为隐藏的feild分配值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.