1

LightboxjQuery.. を使用してタブ ナビゲーションを作成した後、もう機能しません。Chrome視覚化は問題ありませんFirefoxが、めちゃくちゃです。

私は何か間違ったことをしていて、動作event.preventDefault();していません (タブコントローラーreturn falseのアンカーをクリックした後、スクロールを使用してページの下部に戻る必要がありました)。a href="#id_name

どんな助けでも大歓迎です。

頭：

 <!-- Lightbox + Prototype + jQuery -->     
 <script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
 <script type="text/javascript" src="js/lightbox.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 <script type="text/javascript">
      if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); }
 </script>

タブ ナビゲーション用の jQuery:

 <script type="text/javascript">
    $(document).ready(function() {
        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.bmenu li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content                     

        //On Click Event
        $("ul.bmenu li").click(function(event) {
            event.preventDefault(); //non impedisce di scrollare to Top
            $("html, body").animate({ scrollTop: $(document).height() }, "slow");
            $("ul.bmenu li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false; //non impedisce di scrollare to Top
        });                                  
    });
</script>

HTML の一部:

<div class="tab_content content" id="tab2">
    <div class="images_grid"> <!-- images_grid_collezione -->
        <!-- Riga 1 -->
        <a href="imgs_grid/Rosso_01.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_01.png" alt="" /></a>
        <a href="imgs_grid/Rosso_02.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_02.png" alt="" /></a>

ここの一時ディレクトリにウェブサイトをアップロードしました。

4

3 に答える 3

0

jQueryのnoConflictモードを使用して解決しました。簡単に言うと、プロトタイプの短い表記「$」がjQueryの短い表記「$」と競合していました。

スクリプトの先頭に「jQuery.noConflic（）」を追加し、「$」を「jQuery」に置き換えるか、単に変数を追加します（私は「j」を使用しました）。

$j(document).ready(function() { $j(".tab_content").hide(); //Some Other actions ...

問題は解決しました。助けてくれてありがとう！:)

于 2012-08-23T21:25:18.563 に答える
0

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> ヘッダーの一番最初の行に配置

于 2012-08-23T09:08:20.037 に答える
0

問題はjquery、jquery の前に、最後に、jquery に依存する他のライブラリを含めていることです。順序は重要であり、最初にそれを含める必要があります。

 <script type="text/javascript" src="js/prototype.js"></script>   
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 <script type="text/javascript" src="js/lightbox.js"></script>
 <script type="text/javascript">
        if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); }
 </script>
 <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
于 2012-08-23T09:10:23.547 に答える