使用URL中的參數選擇jQuery選項卡

Question

我目前正在調查使用jQuery UI提供的選項卡替換Struts 1標記庫提供的選項卡。我已成功設法將標籤與現有應用程序集成，但我正在努力如何使用傳入URL上的參數設置選定標籤，即myurl.com/action.do?selectedTab=SecondTab。

我是JavaScript和jQuery的新手;從哪裏開始有什麼指點？

Answer 1

使用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片段標識符，例如散列，指向面板的id）。

Answer 2

下面的jQuery插件鏈接似乎是解決方案的可能候選者，因爲它提供了URL和組件部分。然後，您將能夠值與您要選擇或者通過jQuery選擇ID或類標籤的任一指標匹配：

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

Answer 3

• http://stilbuero.de/jquery/history/index.html
• http://stilbuero.de/jquery/tabs/index.html#fragment-1

我想這是足以載入歷史，得到這個工作。

Answer 4

我有一個稍微不同的方法，並不一定依靠內置的select（）函數，但它使用的liveQuery插件：

http://plugins.jquery.com/project/livequery/

這是一個更強大的版本的jQuery生活功能。它可以輕鬆地綁定與查詢匹配的未來元素。

假設你有一個標籤結構如下：

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

這將匹配它只有一次它已經制表指明分數，幾乎「點擊」它。

然後，你可以打電話給你的標籤功能不帶參數：

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

和一旦完成，該選項卡會自動被點擊並選擇！

更重要的是，你可以綁定選項卡創建到的liveQuery本身：

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

，使你有帶班」 .Tabs'的任何元素將被自動轉換成負載時，標籤現在或將來！

Answer 5

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