WooCommerce JQuery Çatışma

Question

aşağıdaki jQuery benim temel şablon sayfaların herhangi birinde çalışıyor:

$(document).ready(function(){ 
    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }); 

}); 

Ancak bu benim WooCommerce tek ürün sayfasında çalışmak için görünmüyor. Kullanıcının aşağıdaki HTML kullanılarak sekmeli içerik tıklamasına izin gerekiyordu:

<ul class="tabs"> 
     <li class="tab-link current" data-tab="tab-1">Product Description</li> 
     <li class="tab-link" data-tab="tab-2">Product Specification</li> 
     <li class="tab-link" data-tab="tab-3">Delivery</li> 
</ul> 
<div id="tab-1" class="tab-content current"> 
    <?php the_content(); ?> 
</div> 
<div id="tab-2" class="tab-content"> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
<div id="tab-3" class="tab-content"> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 

Bunu tahmin ediyorum WooCommerce en jQuery ile çatışma bir tür, ama bu sorunun nasıl çözüleceği konusunda emin değilim. Sekmeli içeriği olan tek bir ürünün bağlantısı: http://sg09.co.uk/product/a-product/. Herhangi bir yardım çok takdir:]

Answer 1

Bunu deneyin ve görün eğer çalışırsa:

jQuery(document).ready(function(){ 
    jQuery('ul.tabs li').click(function(){ 
     var tab_id = jQuery(this).attr('data-tab'); 
     jQuery('ul.tabs li').removeClass('current'); 
     jQuery('.tab-content').removeClass('current'); 
     jQuery(this).addClass('current'); 
     jQuery("#"+tab_id).addClass('current'); 
    }); 

}); 

Answer 2

Bu dosya/wp-content/themes/limon eskrim ilk satırında kodunun altına ekleyin Can/eğer çalışırsa ve/general.js js bkz: eklentisi yazarlar ve tema geliştiriciler

$ = jQuery.noConflict(); 

Answer 3

Birçok bunun farkındadır ve bunlar güvenli olması için yerine '$' arasında 'jQuery kullanabilirsiniz.

/* Normal jQuery you see everywhere */ 
$("#ele").jquerymethod(); 

/* "Safe" jQuery you see in WordPress */ 
jQuery("#ele").jquerymethod(); 

Senin durumunda da bu şekilde jquery kullanabilirsiniz:

jQuery(document).ready(function($) {  
    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    });  
});