Javascript 在页面加载/重新加载上设置Jquery ui活动选项卡
我正在使用jQueryUI选项卡的基本实现,这些选项卡工作正常,但我希望根据用户操作动态设置(或重置)活动选项卡Javascript 在页面加载/重新加载上设置Jquery ui活动选项卡,javascript,jquery,jsp,Javascript,Jquery,Jsp,我正在使用jQueryUI选项卡的基本实现,这些选项卡工作正常,但我希望根据用户操作动态设置(或重置)活动选项卡 如何根据querystring值设置活动选项卡?使用我以前的选项卡解决方案,我能够在加载页面时传递querystring值并设置活动选项卡。(由于其他技术挑战,我不得不放弃这个旧的解决方案。) 当用户在我的浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时,我如何在他们按下“保存”之前将焦点保持在他们所在的选项卡上 当用户返回到浏览器应用程序的“任务”页面时,如何设置“活动”选项
$(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 UI选项卡可以接受选项。对你的问题特别有用的是cookie
和selected
。您可以阅读有关选项的信息。经过进一步的研究和反复试验,我解决了自己的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>
2。当用户在“我的浏览器”应用程序中选择“保存”按钮并重新加载浏览器页面时,我如何在他们按下“保存”之前将焦点保持在他们所在的选项卡上?
我通过捕获单击事件,获取当前选项卡索引,然后设置一个隐藏的表单元素“currentTab”来存储当前选项卡值,从而解决了这个问题。然后回到Javaservlet中,我检索了隐藏的表单元素,并在页面重新加载时将其重置
$(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应用程序中,如果用户浏览到任务页面,然后返回到项目页面,我如何重置他们以前使用的选项卡?
这可以通过在我的Javaservlet中设置一个会话变量来存储隐藏的表单元素“currentTab”来解决。这样,当我返回项目页面时,我可以按照在“保存表单”操作中设置的方式重置“currentTab”值
我希望这个示例可以帮助其他人解决jQuery选项卡问题
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
注意:其中Sel_选项卡是隐藏字段。
单击选项卡或链接将值分配给隐藏字段parse url以设置值,我之前已经通读了这篇文章,但我不知道如何将其集成到我的页面代码中,或者如何访问和使用查询字符串值。你能提供一个简单的工作示例吗?谢谢<代码>$(“.selector”).tabs({selected:3})将使第四个选项卡最初处于活动状态,
$(“.selector”).tabs({cookie:{expires:30})代码>将上次保留活动选项卡30天。注意:您需要cookie插件:
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;