how to switch to another tab in visualforce page using javascript (client side)

Question

I have an <apex:tabPanel> with several <apex:tab>.

After clicking on one tab, I am doing some validation and depending on the validation result I want to switch to another tab. How to do this from client side (I don't want to write any code for switch tab in controller)?

Here is my VisualForce page :

 <apex:page controller="TestController" showHeader="true"  > 
    <apex:form >
    <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" 
        tabClass="activeTab" inactiveTabClass="inactiveTab"> 

        <apex:tab label="Details" name="AccDetails" id="tabdetails"> 

            <apex:inputText id="tab1_Id" label="tab1_Name" value="{!AccountList}"/>
        </apex:tab> 

        <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()"> 

            <apex:inputText id="tab2_Id" label="tab2_Name2" value="{!AccountList}"/>
        </apex:tab>   
    </apex:tabPanel> 
    </apex:form>
    <script language="javascript">
    var validate = function(ele)
{
alert("inside validate " +ele);
var fNameObj = document.getElementById('{!$Component.testPage:myform:tab1_Id}').value;
var sNameObj = $$('[id$="tab1_Id"]').value;

console.log("inside validate fNameObj "+fNameObj);
console.log("inside validate "+sNameObj);

if(fNameObj.trim() == "")
{
alert("tab1Name is mandatory!");
return false;
}
return true;
}
    </script>
    </apex:page>

Answer 1

Here is an example on how you can switch tabs using JavaScript. I have used the element ids from your code. Also I have added id="testPage" for <apex:page tag. Hope this helps.

<apex:page standardController="Account" showHeader="true" id="testPage">          
    <!-- Create Tab panel -->
    <apex:form id="myForm">
        <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
            <apex:tab label="Details" name="AccDetails" id="tabdetails"> 
                <a href="#" onclick="switchTab();">Switch Tab</a>
            </apex:tab>
            <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()">
                content for tab two
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    <script type="text/javascript">
        function switchTab(){
            var tab = document.getElementById('{!$Component.testPage:myform:tabContact}_lbl');
            tab.click();
            return false;   
        }
    </script>   
</apex:page>

Answer 2

Using RichFaces switchTab function, I am able to switch to another tab from Javascript.

RichFaces.switchTab('testPage:myform:AccountTabPanel','testPage:myform:tabdetails','AccDetails');

Please note that Visualforce internally runs on top of JSF and Rich Faces frameworks of J2EE. So many of the visualforce tags are part of rich faces JSF tags.