Question

加载滑块和内容标签时，我的jquery发生了一些事情。如何修复这些脚本之间的冲突？

以下是标题中的js代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script  type="text/javascript">
   var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {

    $j(".tab_content").hide();
    $j(".tab_content:first").show(); 

    $j("ul.tabs li").click(function() {
        $j("ul.tabs li").removeClass("active");
        $j(this).addClass("active");
        $j(".tab_content").hide();
        var activeTab = $j(this).attr("rel"); 
        $j("#"+activeTab).fadeIn(); 
    });
});

</script>

<script src="http://unslider.com/unslider.min.js"></script>
<script src="http://unslider.com/jquery.event.swipe.js"></script>
<script type="text/javascript">$(function() 

{ 
$('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 15000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: true             //  Support responsive design. May break non-responsive designs
}); 
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

如果我移动tab_contents脚本，在unlider下面，则tab_contents脚本不会加载。同样的事情是unlider，它只是没有加载因为tab_contents在它之上。我在Stack Exchange上搜索了答案，并看到一篇帖子说我应该添加.noConflict，我对tab_Contents脚本做了，但问题仍然存在。有什么想法吗？

Answer 1

var tabs = (function() {
    $(".tab_content").hide();
    $(".tab_content:first").show(); 

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel"); 
        $("#"+activeTab).fadeIn(); 
    });
});


var banner = (function(){ 
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 15000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: true             //  Support responsive design. May break non-responsive designs
    }); 
    $( '#nav li:has(ul)' ).doubleTapToGo();
}); 


$(document).ready(function(e) {
    tabs();
    banner();
});

Jquery冲突疑难解答

1 个答案: