选择选项卡和onselect代码冲突 – 无限重新加载页面
我使用JQueryUI TABS插件。
有我的标签结构。
当选择选项卡时,我使用此类代码选择并加载选项卡中的第一个链接。 它自己工作。
$(function() { $( "#tabs" ).tabs(); // Activate first link on tab $( "#tabs" ).bind( "tabsselect", function(event, ui) { window.location.href = $(ui.panel).find('a:first').attr('href'); }); });
但在我的任务中,通过URL参数选择制表符的附加代码非常有用。 因此,如果访问者从第二个选项卡组打开链接,则必须显示第二个选项卡,而不是默认的第一个选项卡。*
我有工作代码,当加载此选项卡的链接时显示正确的选项卡(没有AJAX或类似的,只是ussual链接)。 $URL['part']
是变量我从引擎中的URL接收,这可以单独工作。
<?php if(@$URL['part']=='part2'){ echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });'; } ?>
但是,当我使用这两个代码块时,它会导致页面无限重新加载:-(
更新:
请注意,两个代码块都使用SELECT事件,这就是循环发生的原因。
UPDATED2:
我想,如果在选择选项卡时使用ONCLICK加载链接,并且由于URL设置而在激活选项卡上使用SELECT,则可以解决问题。 但我不知道如何在代码中写这个。
如果您在选项卡创建中移动处理,这是否有效:
$('#tabs').tabs({ select: function(event, ui) { window.location.href = $(ui.panel).find('a:first').attr('href'); } });
在对您的代码进行研究时,最好检查URL,如果它是同一页面则不要去任何地方,无论是通过链接还是通过选项卡选择:
$('#tabs').tabs({ select: function(event, ui) { checkUrl(event, ui.panel); } }); // handle link click on current tab $('div>a').click(function(event) { checkUrl(event, event.target); }); function checkUrl(event, ui) { var ehref = $(event.target).attr('href'); var wl = window.location.href; var currentLocation = typeof ehref == "undefined" ? wl: ehref; var newLocation = $(ui.panel).find('a:first').attr('href'); if (currentLocation != newLocation) { window.location.href = newLocation; } };
在引用你的注释时,有一个创建处理程序,所以你可以在其中包含:
$('#tabs').tabs({ create: function(event, ui) { $( "#tabs" ).bind( "tabsselect", function(event, ui) { window.location.href = $(ui.panel).find('a:first').attr('href'); }); } });
但是我不确定在创建序列上触发的事件,以及如果在创建事件之前或之后选择选项卡(我会想到之后),因为我没有测试过这个。
更新:
这个解决方案不正确! 我保留它的历史原因和评论低于它。 https://stackoverflow.com/a/10642137/1368570 – 这是正确的解决方案:简单明了
我找到了非常接近任务的解决方案:
代码根据我的引擎中处理的URL参数来激活propper TAB
$(function() { $("#tabs").tabs("select","#tabs-1"); });'; } if(@$URL['part']=='part2'){ echo ''; } if(@$URL['part']=='part3'){ echo ''; } ?>
问题:
当我从1-st选项卡转到2-d或3-d时,window.location.href不起作用,URL不会更改。
如果我从除了frist之外的任何标签出发,一切都很完美。
我今天太累了,找不到这个问题的解决方案,如果有人有想法,会很高兴听到他们!
此外,当我在代码中取消注释警报时,我看到所选的var是[object Object]。 因此,如果我将对象与非对象进行比较,那么为什么这个完整的解决方案在大多数情
这是我找到的完整的最终解决方案,即WORKS(crossbrowser)!
创建标签
$(function() { $( "#tabs" ).tabs(); });
选择我们当前URL必须处于活动状态的选项卡
下面的代码必须在我们启动标签并选择哪一个现在处于活动状态之后,否则我们将收到无限的url重新加载!
$(function() { $('#tabs').tabs({ select: function(event, ui) { window.location.href = $(ui.panel).find('a:first').attr('href'); } }); });
因此,当我将基于URL的选项卡选择移动到代码的开头时,这解决了所有问题并使解决方案变得简单!
如果我读得正确,那么你将在链接的HTML中使用相同的代码,即
你将在$( "#tabs" ).tabs()
调用$( "#tabs" ).tabs()
。 如果是这样,为什么不在链接应该重定向的页面中使用$( "#tabs" ).tabs({ active: 1 })
?