0

我使用 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 等，只是通常的链接）。$URL['part']是我从引擎中的 URL 收到的变量，这单独工作正常。

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

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

更新：

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

更新2：

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

4

4 回答 4

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

但我不确定在创建序列上触发的事件，以及选项卡的选择是否发生在创建事件之前或之后（我会在之后考虑），因为我没有对此进行测试。

于 2012-05-16T16:59:54.677 回答
0

更新：

这个解决方案不正确！我出于历史原因保留它，评论在它下面。 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 不会改变。

如果我从除第一个选项卡之外的任何选项卡开始，一切都会完美运行。

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

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

于 2012-05-16T23:43:49.600 回答
0

这是我找到的完整的最终解决方案，它可以工作（跨浏览器）！

创建选项卡

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

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

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

下面的代码必须在我们启动选项卡并选择哪个现在处于活动状态之后，否则我们将收到无限的 url-reloading！

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

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

于 2012-05-17T19:17:57.427 回答
0

如果我没看错，那么您将在链接中的 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 })链接应该重定向的页面中使用？

于 2013-05-23T12:45:48.023 回答