TabPanel switch error

Question

I'm using a tabPanel and cannot get the tabs to switch. When I move the mouse over to or click on a tab, I see this error:

Uncaught TypeError: Cannot call method 'replace' of undefined 3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:107 Element.Methods.removeClassName 3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:107 RichFaces.outTab tabPanel.js:18 onmouseout

<apex:outputPanel layout="none">
    <apex:tabPanel switchType="client" selectedTab="the1stTab" tabClass="activeTab" inactiveTabClass="inactiveTab">
    <apex:tab label="abc" title="abc" name="the1stTab" id="the1stTab">
        </apex:tab>
        <apex:tab label="def" title="def" name="the2ndTab" id="the2ndTab">
        </apex:tab>
   <\apex:tabPanel>
<\apex:outputPanel>

Any advise why this happens?

Answer 1

I just saw this happen on a Visualforce page I was developing. It appears to be a conflict of jQuery.

I added this code, and it resolved the issue for me.

<script type="text/javascript">
   var j$ = jQuery.noConflict();
</script> 

From there, anywhere you reference jQuery, use j$ instead of $

Answer 2

You Can use, JQuery.noConflict() or Simple $.noConflict() for avoiding JQuery Conflict in script tag.