Question

我使用JQueryUI TABS插件。

我的标签结构。

<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>

当选择标签时，我使用此类代码选择并加载标签中的第一个链接。它起作用了。

$(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 '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} ?>

但是，当我使用这两个代码块时，它会导致页面无限重新加载： - （

更新：

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

UPDATED2：

我想，如果在选择选项卡时使用ONCLICK加载链接，并且由于URL设置而在激活选项卡上使用SELECT，则可以解决问题。但我不知道如何在代码中写这个。

Answer 1

如果您在标签创建中移动处理，这是否有效：

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

但是我不确定在创建序列上触发事件，以及如果选择选项卡发生在创建事件之前或之后（我会想到之后），因为我还没有测试过。

Answer 2

更新：

此解决方案不正确！我保留它的历史原因和评论在它下面。 https://stackoverflow.com/a/10642137/1368570 - 这是正确的解决方案：清晰简单

我发现解决方案非常接近任务：

<script language="JavaScript" type="text/javascript">
function MySelect(event, ui){
    // selected - currently selected tab (string)
    var clicked_tab = '' + ui.index //clicked tab

    if(selected !== clicked_tab ){
        //So this code will works ONLY when another tab is selected, so no infinite loop        
        //alert(selected+'/'+ui.index);

            // Activate first link on tab
       $( "#tabs" ).bind( "tabsselect", function(event, ui) {
         window.location.href = $(ui.panel).find('a:first').attr('href');
       });
    }
}   

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            MySelect(event, ui);
        }
     });
});

        //retrieve the index of the currently selected tab
var tabs = $('#tabs').tabs();
var selected = '' + tabs.tabs('option', 'selected'); // from zero 0
</script>

基于我的引擎中处理的URL参数来激活propper TAB的代码

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

<强>问题：

当我从1-st标签转到2-d或3-d时，window.location.href不起作用，URL不会改变。

如果我从除了frist之外的任何标签出发，一切都很完美。

我今天太累了，无法找到解决这个问题的方法，如果有人有想法，很高兴听到他们的意见！

此外，当我在代码中取消注释警报时，我看到所选的var是[object Object]。因此，如果我将对象与非对象进行比较，为什么这个完整的解决方案在大多数情况下运行良好？

Answer 3

这是我找到的完整的最终解决方案，其中包括（交叉浏览器）！

创建标签

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

选择我们当前网址必须处于有效状态的标签

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

以下代码必须在我们启动标签后选择哪一个现在处于活动状态，否则我们将收到无限的网址重新加载！

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

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

Answer 4

如果我读得正确，那么你将在链接的HTML中使用相同的代码，即

<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>

您将在该页面上调用$( "#tabs" ).tabs()。如果是这样，为什么不在链接应该重定向的页面中使用$( "#tabs" ).tabs({ active: 1 })？

选择选项卡和onselect代码冲突 - 无限重新加载页面

4 个答案: