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