【发布时间】：2009-02-22 10:28:49
【问题描述】：
我目前正在研究用 jQuery UI 提供的选项卡替换 Struts 1 标记库提供的选项卡。我已成功设法将选项卡与现有应用程序集成，但我正在努力解决如何使用传入 URL 上的参数设置选定选项卡，即 myurl.com/action.do?selectedTab=SecondTab。
我是 JavaScript 和 jQuery 的新手；从哪里开始有什么建议？
【问题讨论】：
【发布时间】：2009-02-22 10:28:49
【问题描述】：
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;
});
});
【讨论】：
-
@kralco626 : docs.djangoproject.com/en/dev/#the-view-layer 不是无效语法。干杯。
-
正确你是 :) 你花了 6 个月才弄明白？ ;)
-
不，我花了 6 个月才忘记该怎么做！
使用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 片段标识符，例如哈希，指向面板的 id）。
【讨论】：
我有一个稍微不同的方法，它不一定依赖内置的 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>
理想情况下，您需要这样的 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');
});
只有在标签化并虚拟“点击”它时才会匹配它。
然后，你可以不带参数地调用你的 tabs 函数：
jQuery(".Tabs").tabs();
一旦完成，选项卡将自动被点击和选择！
更好的是，您可以将标签创建绑定到 livequery 本身：
jQuery(".Tabs").livequery(function(){
jQuery(this).tabs();
});
这样，任何带有“.Tabs”类的元素都会在加载时自动转换为选项卡，无论现在还是将来！
【讨论】：
jQuery 插件的以下链接似乎是解决方案的可能候选者，因为它为您提供了 URL 和组件部分。然后，您可以通过 jQuery 选择器将值与要选择的选项卡的索引或按 id 或类匹配：
http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3
【讨论】：