经过更多研究和反复试验后,我解决了自己的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.当用户在我的浏览器应用程序中选择“保存”按钮,并且浏览器页面重新加载时,如何在按下保存按钮之前将焦点保持在他们所在的选项卡上?
我通过捕获click事件,获取当前选项卡索引,然后设置一个隐藏的表单元素“ currentTab”来存储当前选项卡值来解决此问题。然后回到Java
Servlet中,我检索了隐藏的form元素,并在重新加载页面时将其重置。
$(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”,可以解决此问题。这样,当我返回“项目”页面时,可以使用在“保存表单”操作中设置的相同方法来重置“ currentTab”值。
我希望这个示例可以帮助其他人解决jQuery标签问题!



