0

我有一个包含几个选项卡的页面，其中使用了 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

4

2 回答 2

0

切换标签时出现 JS 错误。在 test.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 文件并使用已缓存的版本。

于 2012-11-14T14:48:14.980 回答
0

如果我将所有 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>
于 2012-11-14T14:56:06.517 回答