jQuery ui tabs using ajax and fancybox

我有一个页面，其中包含多个选项卡，其中使用了fancybox，在选择第二个选项卡之前，一切都运行良好，然后fancybox停止工作。

主页：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>WebShop</title>      
    <link rel="stylesheet" type="text/css" href="/includes/igepa.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>    
    <script>
    $(function() {
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                $('.ui-tabs-hide').empty();  
                ui.jqXHR.error(function() {
                    ui.panel.html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                });
            },
        });
    });
    </script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="test.htm">Test</a></li>
        <li><a href="test.htm">Test</a></li>
    </ul>
</div>
</body>
</html>

测试.htm ：

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />    
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/i18n/grid.locale-nl.js" type="text/javascript"></script>
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery.jqGrid.min.js" type="text/javascript"></script>                
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.pack.js"></script>
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-media.js"></script>   
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>           
        <script>
            $(document).ready(function(){   
                $(".fancybox").fancybox();              
            });             
        </script>
    </head>
<body>
    <a class="fancybox" rel="group" href="http://www.igepa.be/img/items/01-0000-0002Big.jpg"><img src="http://www.igepa.be/img/items/01-0000-0002.jpg" /></a>
</body>

例： http://www.igepa.be/phdj/tabs/tab.htm

切换选项卡时遇到JS错误。在测试中.html对jquery的引用不起作用，更改：

http://www.igepa.be/js/jquery-1.7.2.min.js

使用正确的 jquery url，例如：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

因此，您的浏览器不会加载新的 jquery 文件并使用已缓存的版本。

如果我将所有 css 和 js 链接移动到"顶级"级别，我找到了解决方案，它工作正常。

这是工作代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>WebShop</title>      
    <link rel="stylesheet" type="text/css" href="/includes/igepa.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>    
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />    
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/i18n/grid.locale-nl.js" type="text/javascript"></script>
        <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery.jqGrid.min.js" type="text/javascript"></script>                
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.pack.js"></script>
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-media.js"></script>   
        <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>           
    <script>
    $(function() {
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                $('.ui-tabs-hide').empty();  
                ui.jqXHR.error(function() {
                    ui.panel.html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                });
            },
        });
    });
    </script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="test.htm">Test</a></li>
        <li><a href="test.htm">Test</a></li>
    </ul>
</div>

</body>
</html>

测试.htm ：

<html>
    <head>
        <title>Test</title>
        <script>
            $(document).ready(function(){   
                $(".fancybox").fancybox();              
            });             
        </script>
    </head>
<body>
    <a class="fancybox" rel="group" href="http://www.igepa.be/img/items/01-0000-0002Big.jpg"><img src="http://www.igepa.be/img/items/01-0000-0002.jpg" /></a>
</body>

相关内容

最新更新

热门标签：