jQuery选项卡不加载jquery选项卡

Question

我目前在我的网站上有一个简单的选项卡系统。然而，我试图实现一个涉及用jQuery调用项目的第三方审查系统。

现在，如果没有noConflict只是运行标签，标签系统将无法正常工作，我相信这可能会导致问题。有没有什么办法解决这一问题？

实例：[REMOVED LINK]

JQUERY

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>var $jagcookies = jQuery.noConflict(true);</script> 
<script type='text/javascript'> 
$jagcookies(document).ready(function(){ 
    $("#tabs li").click(function() { 
     // First remove class "active" from currently active tab 
     $("#tabs li").removeClass('active'); 

     // Now add class "active" to the selected/clicked tab 
     $(this).addClass("active"); 

     // Hide all tab content 
     $(".tabContent").hide(); 

     // Here we get the href value of the selected tab 
     var selected_tab = $(this).find("a").attr("href"); 

     // Show the selected tab content 
     $(selected_tab).show(); 

     // At the end, we add return false so that the click on the link is not executed 
     return false; 
    }); 
}); 
/* ]]> */ 
</script> 

HTML

<ul id="tabs"> 
    <li><a href="#tab1">Description</a></li> 
    <li><a href="#tab2">Video</a></li> 
    <li><a href="#tab3">Map</a></li> 
    <li><a href="#tab4">Downloads</a></li> 
    <li><a href="#tab5">Reviews</a></li> 

</ul> 
<div id="content"> 
    <div id="tab1" class="tabContent"> 
     <span class="productDescription"> 
     </span> 
    </div> 
    <div id="tab2" class="tabContent"> 
     <iframe width="600" height="390" src="link" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <div id="tab3" class="tabContent"> 
     <iframe width="600" height="390" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#maps&ie=UTF8&z=7&t=m&iwloc=near&output=embed"></iframe> 
    </div> 
    <div id="tab4" class="tabContent"> 
     <table id="download-blocks"> 
      <tr> 
      </tr>  
      <tr> 
      </tr> 
      <tr>                             </tr> 
     </table> 
    </div> 

    <div id="tab5" class="tabContent"> 
     <div class="yotpo reviews" 
data-appkey="**" 
data-domain="http://**" 
data-product-id="#Alias" 
data-product-models="Products model information" 
data-name="#NameOrAlias" 
data-url="#FUNCTION("BASEURL", #Shop, 1)#Path[url]" 
data-image-url="**" 
data-description="#IF(#LongDescription)#LongDescription[nohtml,html]#ELSE#Description[nohtml,html]#ENDIF" 
data-bread-crumbs="#LOCAL("MainCategory", #MainCategory)#IF(#MainCategory)#IF(#Shop.Child.Pages.Child.SpecialOffers.ID == #MainCategory.ID){SpecialOffers}#ELSE#LOOP(#MainCategory.PathFromSite) #NameOrAlias/#ENDLOOP#ENDIF#ENDIF#ENDLOCAL"></div>    
    </div> 
</div> 

Answer 1

我已经改变了jQuery，并在页面的底部插入它并没有解决问题当标签开始时。

我已经在代码中添加注释 - JQUERY（注意，在HTML仍将牛逼

$(document).ready(function() { 
    $("#content").find("[id^='tab']").hide(); // Hide all content 
    $("#tabs li:first").attr("id","current"); // Activate the first tab 
    $("#content #tab1").fadeIn(); // Show first tab's content 

    $('#tabs a').click(function(e) { 
     e.preventDefault(); 
     if ($(this).closest("li").attr("id") == "current"){ //detection for current tab 
     return;  
     } 
     else{    
      $("#content").find("[id^='tab']").hide(); // Hide all content 
      $("#tabs li").attr("id",""); //Reset id's 
      $(this).parent().attr("id","current"); // Activate this 
      $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab 
     } 
    }); 
}); 

Answer 2

仍然使用$你需要把它传递到包装函数像这样：

服用。从jQuery noConflict页面。

jQuery.noConflict(); 
(function($) { 
    $(function() { 
     // More code using $ as alias to jQuery 
    }); 
})(jQuery); 

在你的代码正在通过$jagcookies然后创建一个不同的别名你继续在你的代码中使用$。或者将它们全部换成$jagcookies中的document.ready函数，或者使用上面的示例包装您的代码。

Fiddle demo

jQuery.noConflict(); 
(function($) { 
    $(function() { 
     //put your code here 
     $("#tabs li").click(function() { 
      ... 
     }); 
    }); 
})(jQuery); 

Answer 3

与$jagcookies这样的替换其他$迹象：

代码：

var $jagcookies = jQuery.noConflict(true); 
$jagcookies(document).ready(function(){ 
$jagcookies("#tabs li").click(function() { 
    // First remove class "active" from currently active tab 
    $jagcookies("#tabs li").removeClass('active'); 

    // Now add class "active" to the selected/clicked tab 
    $jagcookies(this).addClass("active"); 

    // Hide all tab content 
    $jagcookies(".tabContent").hide(); 

    // Here we get the href value of the selected tab 
    var selected_tab = $jagcookies(this).find("a").attr("href"); 

    // Show the selected tab content 
    $jagcookies(selected_tab).show(); 

    // At the end, we add return false so that the click on the link is not executed 
    return false; 
}); 
}); 

See Demo