jquery tablesorter with apex:tabs

Question

When I include the following scripts, I am unable to load the content of any apex:tab that is not selected by default (clicking on the tab does not show the content of the tab; the tab stays on the default tab).

<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/js/jquery.tablesorter.min.js" />

The default tab loads fine, and if I do not include the above scripts on the Visualforce page at all, then the apex:tabpanel and apex:tab functionality works as expected. Removing the following script alone does not correct the problem:

    <script>
        $(document).ready(function(){
            $("[id$='Inspections']").tablesorter();
            $("[id$='Months']").tablesorter();
            $("[id$='Inspectors']").tablesorter();
            $("[id$='AddedServices']").tablesorter();
        });
    </script>

The tab panel structure is:

<apex:tabPanel selectedTab="last_year" switchType="client" id="TabPanel1">
   <apex:tab label="This Year" labelWidth="250" styleClass="label" name="this_year" id="this_year">
   </apex:tab>
   <apex:tab label="Last Year" labelWidth="250" styleClass="label" id="last_year" name="last_year">
   </apex:tab>
</apex:tabPanel>

Answer 1

I resolved this issue by adding

j$ = jQuery.noConflict();

To the script.