使用 URL 中的参数选择 jQuery 选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/574699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Selecting a jQuery Tab using a parameter in the URL
提问by djsnowsill
I am currently investigating replacing the tabs provided by a Struts1 tag library with the tabs provided by jQuery UI. I have successfully managed to get the tabs integrated with the existing application but I am struggling on how to set the selected tab using a parameter on the incoming URL, that is myurl.com/action.do?selectedTab=SecondTab.
我目前正在研究用jQuery UI 提供的选项卡替换Struts1 标记库提供的选项卡。我已经成功地将选项卡与现有应用程序集成，但我正在努力解决如何使用传入 URL 上的参数设置所选选项卡，即 myurl.com/action.do?selectedTab=SecondTab。
I am a newcomer to JavaScript and jQuery; what are some pointers on where to start?
我是 JavaScript 和 jQuery 的新手；从哪里开始有哪些提示？
回答by Stan
Jquery-UI give you that for (almost) free : Use the internal links. And it's better than using ugly get parameters.
Jquery-UI 为您提供（几乎）免费：使用内部链接。而且比使用丑陋的 get 参数要好。
Passing http://my.site.org/mypage/#foo-tabin your navigator will automaticly select the tab with the container having id="foo-tab".
在导航器中传递http://my.site.org/mypage/#foo-tab将自动选择带有 id="foo-tab" 容器的选项卡。
The trick is to add an event to update the url when selecting a tab so that when you reload you do not lose the current tab :
诀窍是在选择选项卡时添加一个事件来更新 url，以便在重新加载时不会丢失当前选项卡：
$(document).ready(function () {
$("#tabs").bind('tabsselect', function(event, ui) {
window.location.href=ui.tab;
});
});
回答by zihotki
Using http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-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);
});
From documentation:
从文档：
#select
Signature:
签名：
.tabs( 'select' , [index] )
Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).
选择一个选项卡，就像它被点击一样。第二个参数是要选择的选项卡的从零开始的索引或与选项卡关联的面板的 id 选择器（选项卡的 href 片段标识符，例如哈希，指向面板的 id）。
回答by REA_ANDREW
The following link of a jQuery plugin seems a possible candidate for a solution, as it provides you with the URL and the component parts. You would then be able to match the value with either the index of the tab you want to select or by id or class through the jQuery selector:
jQuery 插件的以下链接似乎是解决方案的可能候选者，因为它为您提供了 URL 和组件部分。然后，您将能够通过 jQuery 选择器将值与要选择的选项卡的索引或 id 或 class 匹配：
http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3
http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3
回答by artsy.ca
I've got a slightly different approach that doesn't necessarily rely on the built-in select() function, but does use the livequery plugin:
我有一个稍微不同的方法，它不一定依赖于内置的 select() 函数，但确实使用了 livequery 插件：
http://plugins.jquery.com/project/livequery/
http://plugins.jquery.com/project/livequery/
which is a more powerful version of the jQuery live function. It can easily bind future elements that match a query.
这是一个更强大的 jQuery live 功能版本。它可以轻松绑定与查询匹配的未来元素。
Suppose you have a tabs structure as follows:
假设您有如下的选项卡结构：
<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>
ideally, you want a URL structure like this:
理想情况下，您需要这样的 URL 结构：
mydomain/mypage?tab=tab2
it becomes quite tricky because the select() method only supports integer indices, and what happens when you change your tabs around?
它变得非常棘手，因为 select() 方法只支持整数索引，当你改变你的标签时会发生什么？
Supposing you can get the url parameter into a variable as indicated above to do the following:
假设您可以将 url 参数放入如上所述的变量中以执行以下操作：
First you locate your target element and add a class to it:
首先找到目标元素并向其添加一个类：
jQuery('a#' + param).addClass('selectMe');
Next you bind a livequery function to the element:
接下来将 livequery 函数绑定到元素：
jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
jQuery(this).removeClass('selectMe').triggerHandler('click');
});
This will match it only once it's been tab-ified and virtually 'click' it.
只有当它被标签化并虚拟地“点击”它时，它才会匹配它。
Then, you can call your tabs function with no parameters:
然后，您可以不带参数调用 tabs 函数：
jQuery(".Tabs").tabs();
and once it's complete, the tab will automatically be clicked and selected!
完成后，该选项卡将自动被单击并选中！
Better yet, you can bind the tabs creation to livequery itself:
更好的是，您可以将选项卡创建绑定到 livequery 本身：
jQuery(".Tabs").livequery(function(){
jQuery(this).tabs();
});
so that any elements you have with class '.Tabs' will automatically be converted into tabs upon load, now or in the future!
以便您在类“.Tabs”中拥有的任何元素都将在加载时自动转换为选项卡，现在或将来！
回答by Ionu? Staicu
I guess it is enough to load history and get this to work.
我想加载历史记录并让它工作就足够了。
