0

ファンシーボックスが使用されているいくつかのタブを含むページがありますが、2番目のタブを選択するまですべて正常に機能し、その後ファンシーボックスが機能しなくなります。

メインページ ：

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

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

test.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 に答える