Question

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

我是JavaScript和jQuery的新手;什么是关于从哪里开始的一些指示？

Answer 1

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

在导航器中传递 http://my.site.org/mypage/#foo-tab 会自动选择容器ID =“foo-tab”的标签。

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

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

Answer 2

使用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);
});

来自documentation：

#select

签名：

.tabs( 'select' , [index] )

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

Answer 3

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

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3

Answer 4

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

http://plugins.jquery.com/project/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>

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

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');
});

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

然后，您可以在没有参数的情况下调用标签功能：

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

一旦完成，将自动点击并选择标签！

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

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

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

Answer 5

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

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

5 个答案: