带有书签选项的 jQuery 嵌套选项卡答案

【问题标题】：jQuery Nested tab with bookmark option带有书签选项的 jQuery 嵌套选项卡
【发布时间】：2011-07-29 08:39:07
【问题描述】：

我确实有一个进行某种管理的网站。在那里，我使用 JQuery Tab 作为结构并使用 AJAX 调用所有面板。根据我在某处找到的帖子，我还使用 JQuery 地址作为书签

我有两个问题

1) 虽然这一切都适用于 FF，但我无法让它在 IE 中运行（嗯，只是书签的东西） 2) 我的 javascript 看起来很糟糕（我不知道如何简化它）

你能帮上忙吗？

谢谢

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<link type="text/css" href="Style/style.css" rel="stylesheet"/>
<link href="Style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="Style/colorbox.css" rel="stylesheet" type="text/css"/>
<script src="JS/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="JS/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

<script src="JS/jquery.address-1.3.1.min.js" type="text/javascript"></script>
<script src="JS/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a[rel='colorBox']").colorbox();
        $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          
                    $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } ); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
}); 


$(function(){
    var title = 'title';
    $('head title').text(title);


    // jQuery Address
    $.address.strict(0);
    $.address.tracker(0);
    if ($.address.value() == '') {
        $(".tabs1").tabs("select", "#index");
        //$(".tabs2").tabs("select", "#list");
        $.address.value('index');
    }
    $.address.init(function(event) {
        $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          
                    $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } ); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 

    });
    $.address.change(function(event) {
        var value = $.address.value();
        $.address.title(title + ' @ #' + value);
    });
    $.address.externalChange(function(event) {
        var value = $.address.value();
        var value_array = value.split('-');
        $(".tabs1").tabs("select", value_array[0]);
        $(".tabs2").tabs("select", value_array[1]);
        $(".tabs3").tabs("select", value_array[2]);
        $.address.value(value);
    });
    $.address.history(true);

    $('ul li a').bind('click', function() {
        var value = $(this).attr('href').substring(1);
        $.address.value(value);
    });    
});
</script>
</head>
<body>


<div class="tabs1">

<ul>

<li><a href="indexTab.php" title="index"><span>Home</span></a></li>
<li><a href="memberTab.php" title="member"><span>Données membre</span></a></li>
<li><a href="clubTab.php" title="club"><span>Club</span></a></li>
<li><a href="gestionTab.php" title="gestion"><span>Gestion</span></a></li>
<li><a href="toolsTab.php" title="tools"><span>Outils</span></a></li>

</ul>

<div id="index" class="ui-tabs-hide"></div>
<div id="member" class="ui-tabs-hide"></div>
<div id="club" class="ui-tabs-hide"></div>
<div id="gestion" class="ui-tabs-hide"></div>
<div id="tools" class="ui-tabs-hide"></div>
</div>






</body>
</html>

【问题讨论】：

那是很多代码。你能在jsfiddle.net 创建一个例子吗？

标签： jquery ajax tabs nested bookmarks

【解决方案1】：

使用 $('selector').delegate() 它会监视“选择器”的 DOM，而 .live() 已弃用。

使用它来观察您的元素并触发彩盒初始化。这样颜色框不依赖于 DOM 元素，而是反过来。

替换：

$("a[rel='colorBox']").colorbox();

与：

$("body").delegate("a[rel='colorBox']", "click", function (event) {
                event.preventDefault();
                var props = {href:$(this).attr("href")}
                if($(this).hasClass("ajaxColorBox"))
                    props['width'] = "75%";
                    props['height'] = "75%";
                }else if($(this).hasClass("ajaxColorBoxForm")){
                    props['width'] = "75%";
                    props['height'] = "75%";
                    props['inline'] = true;
                    props['href'] = "#inline_form";     
                }else if($(this).hasClass("ajaxColorBoxiFrame")){   
                    props['width'] = "75%";
                    props['height'] = "75%";
                    props['iframe'] = true;
                    props['onClosed'] = function(){ location.reload(true); }
                }
                $.colorbox(props);
});

这应该基本上解决了您的问题，并且经过了跨浏览器测试。委托闭包中的 a[rel='colorbox'] 是对您单击以触发颜色框的任何链接的引用，无论它是否已加载初始 DOM 或 AJAX 请求并已添加到 DOM以现场的方式。即：任何这样的标签：

<a rel='colorbox' href="http://some.website.com">Launch Colorbox</a>

您现在还可以删除以下各项的每个实例：

$(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
$(".ajaxColorBoxLabel").colorbox();         
$(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
$(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});

来自每个success: function(){}

【讨论】：