Apex:Tab in Visualforce

apex:Tab is a visualforce component that displays data in tabs. It is used in accordance with apex:TabPanel.

apex:tabPanel is a page area that displays as a set of tabs. When a user clicks a tab header, the tab’s associated content displays, hiding the content of other tabs.

apex:tab is very useful when you want to show only a set of fields or data at a time to the user.

In this example, I am showing the basic details of account like name, phone etc in one tab whereas I am showing account shipping details in another tab.

Visualforce Page:

<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->

<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
change the default styling of the tab bar. Note that in the style definitions,
'background-image:none' is required to override the default image with the
specified color. You can also provide your own image with .css styles. -->

<apex:page standardController="Account" showHeader="true">
    <!-- Define Tab panel .css styles -->
    <style>
        .activeTab {background-color: #236FBD; color:white; background-image:none;font-size: 20px;}
        .inactiveTab { background-color: lightgrey; color:black; background-image:none;font-size: 20px;}
    </style>
    
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="AccountDetails" id="AccountTabPanel"
                   tabClass='activeTab' inactiveTabClass='inactiveTab'>
        <apex:tab  label="Account Details" name="AccountDetails" id="AccountDetails">
            <apex:pageBlock>
                <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="Name: " for="nameField"/>
                <apex:outputText style="font-size: 15px;" id="nameField" value="{!IF(Account.Name == null, 'N/A', Account.Name)}"/> <br/>  <br/>
                
                <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="AccountNumber: " for="AccountNumberField"/>
                <apex:outputText style="font-size: 15px;" id="AccountNumberField" value="{!IF(Account.AccountNumber == null, 'N/A', Account.AccountNumber)}"/><br/> <br/>
                
                <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="PhoneNumber: " for="phoneNumberField"/>
                <apex:outputText style="font-size: 15px;" id="phoneNumberField" value="{!IF(Account.Phone == null, 'N/A', Account.Phone)}"/>
                
            </apex:pageBlock>
        </apex:tab>
        <apex:tab label="Shipping Details" name="ShippingDetails" id="ShippingDetails">
            
            <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="Shipping Country: " for="accountShippingCountry"/>
            <apex:outputText style="font-size: 15px;" id="accountShippingCountry" value="{!IF(Account.ShippingCountry == null, 'N/A', Account.ShippingCountry)}"/> <br/> <br/>
            
            <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="Shipping State: " for="accountShippingState"/>
            <apex:outputText style="font-size: 15px;" id="accountShippingState" value="{!IF(Account.ShippingState == null, 'N/A', Account.ShippingState)}"/><br/>  <br/>
            
            <apex:outputLabel style="font-size: 15px;font-weight: bold;" value="Shipping City: " for="accountShippingCity"/>
            <apex:outputText style="font-size: 15px;" id="accountShippingCity" value="{!IF(Account.ShippingCity == null, 'N/A', Account.ShippingCity)}"/>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

Output: