jQuery UI – 使用外部链接在选项卡中打开Accordion

我想在每个外部链接的Tab中打开一个Accordion。 例如：www.demosite.com/site#tab1&2应打开第一个选项卡，并在选项卡内打开第二个手风琴。

到目前为止，我使用以下代码打开特定的Tab：

$( "#tabs" ).tabs({ collapsible: true, select: function(event, ui) { window.location.hash = ui.tab.hash; } }); 

为了打开手风琴我瘦，我应该使用jQuery UI Accordion的主动function，但我不知道，我如何使用它们。

谁能帮我吗？

http://jsfiddle.net/bMeLL

Answer 1

您应该拆分哈希，以便在其中包含两个信息。

示例1：＃0 | 1将打开第一个选项卡和第二个面板
示例2：＃1 | 0将打开第二个选项卡和第一个面板

为此，我创建了两个函数：getHash和setHash。

 $(function() { $(document).ready(function(){ var getHash = function(key){ var parts = window.location.hash.substr(1).split(/\|/); var _key = parseInt(key) || 0; return _key < parts.length ? parts[_key] : false; }; var setHash = function(key, value){ var parts = window.location.hash.substr(1).split(/\|/); var _key = parseInt(key) || 0; parts[_key] = value window.location.hash = '#' + parts.join('|'); }; $(".accordion").accordion({ heightStyle: "content", collapsible: true, animated: 'slide', navigation: true, activate: function(event, ui) { if(ui.newHeader.length > 0){ // A new accordion panel is open setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader)); }else{ // In case accordion panel is closed setHash(1, ''); } }, active: false }); $( "#tabs" ).tabs({ collapsible: true, activate: function(event, ui) { if(ui.newTab.length > 0){ // A new tab is open var tabHash = ui.newTab.parent().children().index(ui.newTab); if(tabHash == getHash(0)){ // In case current tab is the one in Hash, we open wanted accordion panel // Make sure to parseInt hash value, because jquery-ui require an integer ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1))); }else{ setHash(1,''); } setHash(0, tabHash); }else{ // In case we close tab, hash is cleared window.location.hash = '' } }, create: function(event, ui){ if(ui.tab.length > 0){ var tabHash = ui.tab.parent().children().index(ui.tab); if(tabHash == getHash(0)){ // In case current tab is the one in Hash, we open wanted accordion panel // Make sure to parseInt hash value, because jquery-ui require an integer ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1))); }else{ setHash(1,''); } setHash(0, tabHash); } }, // Make sure to parseInt hash value, because jquery-ui require an integer // Remove the " || 0 " if you want all to be closed active: parseInt(getHash(0)) || 0 }); }); }); 

我在这里做了一个分叉： http ： //jsfiddle.net/9nKZp/1/
结果如下： http ： //jsfiddle.net/9nKZp/1/show/

Answer 2

在.accordion() call中，你想使用active: N ，其中N是你想要展开的手风琴的索引（它接受一个数字，但你的小提琴使用它就像一个布尔值）。

现在你只需要提供N的值而不是我的硬编码值1 。 在您的ui.tab.hash -method上ui.tab.hash可能会有效。

有几种不同的方法可以检索查询字符串参数，但您的url必须类似于demosite.com/site?tab=1&accordion=2 。 做一些关于如何将查询字符串参数转换为Javascript变量的研究。

这是你小提琴的一个分支