使用URL中的参数选择jQuery选项卡

我目前正在研究使用jQuery UI提供的选项卡替换Struts 1标记库提供的选项卡。我已成功设法将选项卡与现有应用程序集成，但我正在努力研究如何使用传入URL上的参数设置所选选项卡，即myurl.com/action.do?selectedTab=SecondTab。

我是JavaScript和jQuery的新手; 什么是从哪里开始的指针？

使用http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2 ：

$(document).ready(function(){ var param = $(document).getUrlParam('selectedTab'); $('#menu').tabs('select', param); });

从文档：

 #select

签名：

 .tabs( 'select' , [index] )

选择一个选项卡，就像单击它一样。第二个参数是要选择的选项卡的从零开始的索引或与选项卡关联的面板的id选择器（选项卡的href片段标识符，例如hash，指向面板的id）。

Jquery-UI为您提供（几乎）免费：使用内部链接。它比使用丑陋的get参数更好。

在导航器中传递http://my.site.org/mypage/#foo-tab将自动选择容器具有id =“foo-tab”的选项卡。

诀窍是在选择选项卡时添加一个事件来更新URL，以便在重新加载时不会丢失当前选项卡：

  $(document).ready(function () { $("#tabs").bind('tabsselect', function(event, ui) { window.location.href=ui.tab; }); });

我有一个稍微不同的方法，不一定依赖于内置的select（）函数，但确实使用了livequery插件：

这是一个更强大的jQuery live函数版本。它可以轻松绑定与查询匹配的未来元素。

假设您有一个标签结构，如下所示：

   Link 1
 Link 2
 Link 3
 
 .. ..

理想情况下，您需要这样的URL结构：

 mydomain/mypage?tab=tab2

它变得非常棘手，因为select（）方法只支持整数索引，当您更改选项卡时会发生什么？

假设您可以将url参数转换为如上所示的变量，以执行以下操作：

首先，找到目标元素并向其添加一个类：

 jQuery('a#' + param).addClass('selectMe');

接下来，将livequery函数绑定到元素：

 jQuery('.ui-tabs-nav a.selectMe').livequery(function(){ jQuery(this).removeClass('selectMe').triggerHandler('click'); });

只有当它被标签化并且几乎“点击”它时才会匹配它。

然后，您可以调用您的选项卡function，不带任何参数：

 jQuery(".Tabs").tabs();

一旦完成，将自动点击并选择选项卡！

更好的是，您可以将标签创建绑定到livequery本身：

 jQuery(".Tabs").livequery(function(){ jQuery(this).tabs(); });

这样，任何带有’.Tabs’类的元素都会在加载时自动转换为制表符，无论是现在还是将来！

jQuery插件的以下链接似乎是解决方案的可能候选者，因为它为您提供了URL和组件部分。然后，您可以将值与要选择的选项卡的索引或通过jQuery选择器的id或类匹配：

我想这足以加载历史并让它发挥作用。