在页面加载/重新加载时设置Jquery ui活动选项卡

我使用的Jquery UI选项卡的基本实现工作正常，但我想根据用户操作动态设置（或重置）活动选项卡。

1. 如何根据查询字符串值设置活动选项卡？ 使用我之前的选项卡解决方案，我能够传递查询字符串值并在页面加载时设置活动选项卡。 （由于其他技术挑战，我不得不放弃这个旧解决方案。）

2. 当用户在浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时，如何在按下保存之前将焦点保持在他们所在的选项卡上？

3. 当用户返回浏览器应用程序的“任务”页面时，如何设置活动选项卡？ 例如，在我的Web应用程序中，如果用户浏览到“项目”页面然后返回“任务”页面，我该如何重置之前的选项卡？

使用Javascript：

$(function() { $("#tabs").tabs(); }); 

HTML示例代码：

 
 
 
Description
 
Action
 
Resources
 
Settings
 
 
 
Description content
 
 
 
Action content
 
 
 
Resources content
 
 
 
Settings 
 
  

Answer 1

在进行了额外的研究和反复试验后，我解决了自己的jQuery选项卡问题。 这是一个有效的例子。 我不知道这是否是最优雅的解决方案，但它有效。 我希望这有帮助。

         
   
 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
Tab 1 Content
 
Tab 2 Content
 
Tab 3 Content
 
 
  

以下是我回答以前每个问题的方法。

1.如何根据查询字符串值设置活动选项卡？ 我最终不需要使用查询字符串。 我将＃tabs-x添加到了我的url的末尾。 例如，如果我想直接链接到Tab 3，我将链接编码为：

 localhost:8080/pm/detail?prjID=2077#tabs-3 

2.当用户在浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时，如何在按下保存之前将焦点保持在他们所处的选项卡上？

我通过捕获click事件，获取当前选项卡索引，然后设置隐藏的表单元素“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.当用户返回浏览器应用程序的“项目”页面时，如何设置活动选项卡？ 例如，在我的Web应用程序中，如果用户浏览“任务”页面然后返回“项目”页面，我该如何重置之前的选项卡？

这可以通过在我的Java Servlet中设置一个会话变量来存储隐藏的表单元素“currentTab”来解决。 这样，当我返回Project页面时，我可以重置“currentTab”值，就像我在Save forms action中设置它一样。

我希望这个例子可以帮助其他人解决他们的jQuery选项卡问题！

Answer 2

jQuery UI选项卡可以包含选项。 对您的问题特别有用的是cookie和selected 。 您可以在这里阅读有关选项的信息 。

Answer 3

  var currentTab = $('.ui-state-active a').index(); currentTab = $('#divMainContent').find('#sel_tab')[0].value; 

注意：Sel_tab是隐藏字段的位置。 onclick on tabs achor link为隐藏的feild分配值