选择选项卡和onselect代码冲突-页面无限重载 [英] Selection tab and onselect code conflict - infinite reloading of page

问题描述

我使用JQueryUI TABS插件.

I use JQueryUI TABS plugin.

这是我的标签结构.

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

我用这样的代码来选择和被选择的标签时加载标签中，第一链路. 它本身可以工作.

I use such code to select and load first link in tab, when tab is selected. It works itself.

$(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参数选择选项卡非常必要. 因此，如果访问者打开了第二个选项卡组中的链接，则第二个选项卡必须显示为打开状态，而不是默认的第一个选项卡.*

BUT in my task addition code for selecting tab by URL parameters strongly nessesary. So if visitor opened link from second tab-group, second tab must be showed opened, not default first one.*

我有工作代码，当加载来自该标签的链接时，该标签显示正确的标签(没有AJAX或类似的链接，只是常用链接). $URL['part']是我从引擎中的URL接收到的变量，可以单独使用.

I have working code which show correct tab when link from this tab is loaded (no AJAX or such, just ussual links). $URL['part'] is variable I recieve from my URL in engine, this works fine separately.

<?php if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} ?>

但是当我同时使用这两个代码块时，它会导致页面反复无限重载:-(

BUT when I use both these code-blocks it cause page repeatedly infinite reload :-(

已更新:

请注意，这两个代码块都使用SELECT事件，这就是为什么发生循环的原因.

Notice, that both of blocks of code use SELECT event, that why the looping occurs.

UPDATED2:

我想，如果在选择选项卡时使用ONCLICK加载链接，而由于URL设置而在激活选项卡上使用SELECT，则可以解决此问题.但是我不知道该如何用代码编写.

I suppose, if use ONCLICK for loading link when tab is selected, and SELECT on activation tab due to URL settings, it can solve the problem. But I don't know how to write this in code.

推荐答案

这是我发现的完整的最终解决方案，该解决方案是WORKS(跨浏览器)！

创建标签

$(function() {
    $( "#tabs" ).tabs();
});

选择对于我们当前拥有的URL必须处于活动状态的标签

Select the tab which must be active for the current URL we have

<?php 
if(@$URL['part']=='part1'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-1"); });'; 
} 
if(@$URL['part']=='part2'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });'; 
} 
?>

下面的代码必须在我们启动选项卡并选择现在处于活动状态的选项卡之后，否则我们将收到无限的URL重新加载！

The below code MUST be after we started tabs and selected which one is now active, otherwise we will recieve infinite url-reloading!

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            window.location.href = $(ui.panel).find('a:first').attr('href');
        }
    });
});

因此，当我将基于URL的选项卡选择移到代码开头时，这解决了所有问题，并使解决方案变得如此简单！

So, when I moved tab selection based on URL to the begining of code, this solved all the issues and make solution this simple!

这篇关于选择选项卡和onselect代码冲突-页面无限重载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！