WooCommerce JQuery Conflict
<p>The following jQuery works fine on any of my basic template pages:</p>

<pre><code>$(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');
    });

});
</code></pre>

<p>However this does not seem to work on my WooCommerce single product page. It is supposed to allow the user to click through tabbed content using the following HTML:</p>

<pre><code>&lt;ul class="tabs"&gt;
        &lt;li class="tab-link current" data-tab="tab-1"&gt;Product Description&lt;/li&gt;
        &lt;li class="tab-link" data-tab="tab-2"&gt;Product Specification&lt;/li&gt;
        &lt;li class="tab-link" data-tab="tab-3"&gt;Delivery&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="tab-1" class="tab-content current"&gt;
    &lt;?php the_content(); ?&gt;
&lt;/div&gt;
&lt;div id="tab-2" class="tab-content"&gt;
    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.
&lt;/div&gt;
&lt;div id="tab-3" class="tab-content"&gt;
   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.
&lt;/div&gt;
</code></pre>

<p>I'm assuming this is some kind of conflict with WooCommerce's jQuery, but I'm unsure of how to resolve this issue. Here's a link to a single product with the tabbed content: <a href="http://sg09.co.uk/product/a-product/" rel="nofollow">http://sg09.co.uk/product/a-product/</a>. Any help would be much appreciated :]</p>