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

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

---

我是JavaScript和jQuery的新手；关于从哪里开始，有哪些建议？

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

使用：

发件人：

签名：

.tabs( 'select' , [index] )

---

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

我有一个稍微不同的方法，不必依赖内置的select（）函数，但是否使用livequery插件：

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

假设您有如下选项卡结构：

<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>

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

假设您可以将url参数放入如上所示的变量中，以执行以下操作：

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

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

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

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

这将只匹配它一次，它被标签化，并几乎'点击'它

然后，您可以不带参数地调用tabs函数：

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

一旦完成，选项卡将自动单击并选中

更好的是，您可以将选项卡创建绑定到livequery本身：

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

---

这样，无论是现在还是将来，类“.Tabs”中的任何元素都将在加载时自动转换为选项卡

jqueryui几乎免费提供：使用内部链接。这比使用难看的get参数要好

在导航器中传递将自动选择容器id为=“foo tab”的选项卡

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

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

---

@kralco626:不是无效语法。干杯。你说得对：）你花了6个月的时间才弄明白不，我花了6个月的时间才忘记该怎么做！

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

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

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