Question

使用Lightbox进行标签导航后，

jQuery无法正常工作。 Chrome可视化很好，但在Firefox中是一团糟。

我做错了，因为event.preventDefault();和return false无法正常工作（我必须使用滚动条在点击锚点后移回页面底部{{1} }对于标签控制器）

任何帮助都将不胜感激。

目：

a href="#id_name

用于标签导航的jQuery：

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

部分HTML：

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

我将网站上传到临时目录here。

Answer 1

放置<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 在标题的第一行

Answer 2

问题是你在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>

Answer 3

我使用jQuery noConflict模式解决了这个问题。长话短说：原型短符号“$”与jQuery短符号“$”冲突。

在脚本开头添加“jQuery.noConflic（）”并将“$”替换为“jQuery”或简单地添加一个变量（我使用“j”）。

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

问题解决了。谢谢大家的帮助！：）

Lightbox + jQuery冲突

3 个答案: