apex:tabPanel

1<!-- Page: -->
2<apex:page id="thePage">
3    <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
4        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
5        <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
6    </apex:tabPanel>
7</apex:page>

1<!-- For this example to render properly, you must associate the Visualforce page 
2with a valid account record in the URL. 
3For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
4https://Salesforce_instance/apex/myPage?id=001D000000IRt53
5See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
6                    
7<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
8change the default styling of the tab bar. Note that in the style definitions,
9'background-image:none' is required to override the default image with the
10specified color. You can also provide your own image with .css styles. -->
11            
12<apex:page standardController="Account" showHeader="true">
13    <!-- Define Tab panel .css styles -->
14    <style>
15    .activeTab {background-color: #236FBD; color:white; background-image:none}
16    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
17    </style>
18            
19    <!-- Create Tab panel -->
20    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
21        tabClass='activeTab' inactiveTabClass='inactiveTab'>
22        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
23        <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
24    </apex:tabPanel>
25</apex:page>