<apex:page controller="temp"  sidebar="false">

<apex:form >
<apex:pageBlock >


           
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>

<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
           <apex:tab label="Select Mail Merge Template">
           <apex:pageBlockSection >
           <apex:pageBlockTable value="{!temp1}" var="t">
           <apex:column >
           <apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
           {!t.name}
           <apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
              
           </apex:commandLink>
            
           </apex:column>
          
           </apex:pageBlockTable>
                  
                      
          <apex:outputPanel id="temp_dt" >
           {!em.Name}
          </apex:outputPanel>  
        
     </apex:pageBlockSection>
      </apex:tab>
               
<!----------------------------teb2-------------------------->
               
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>  
</apex:tab>
                
                
                <!-------tab3---------------->
                
                <apex:tab label="Select Contact" >
                
                <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
}
.tabs {
  list-style: none;
  width: 200px;
  float: left
}

.tabs a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  background: #fff;
  color: #000;   
  border-bottom: 1px solid #ccc;
}

.tabContent {
  margin-left: 200px;
  min-height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.tabs a.active {
  background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
  display: none
}
.tabContent .activeTab {
  display: block
}
</style>
<script>
$(document).ready(function(){
  $('.tabs a').click(function(){
    var tabId = $(this).attr('href');
    $('.tabs a').removeClass('active');
    $(this).addClass('active');
    $('.tabContent .tabBox').removeClass('activeTab');
    $(tabId).addClass('activeTab')
  });
});
</script>
<ul class="tabs" >
  <li><a class="active" href="#tab1">Tab One</a></li>
  <li><a href="#tab2">Tab Two</a></li>
  <li><a href="#tab3">Tab Three</a></li>
  <li><a href="#tab4">Tab Four</a></li>
</ul>  
<div class="tabContent">
  <div class="tabBox activeTab" id="tab1">Tab One</div>
  <div class="tabBox" id="tab2">Tab Two</div>
  <div class="tabBox" id="tab3">Tab Three</div>
  <div class="tabBox" id="tab4">Tab Four</div>
</div>
                
                <apex:selectRadio >
        <apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
        <apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
          
      </apex:selectRadio>
              </apex:tab>
              
              
                <apex:tab label="Preview & Send" >
               </apex:tab>
</apex:tabPanel>
</apex:pageblock>

</apex:form>

</apex:page>
<-.............................................->this is the controller for this visualforce code

public class temp {
public string Contact{get;set;}
public string lead{get;set;}
public string selectedTemplate{get; set;}
public EmailTemplate em{get; set;}

public void callEmailTemplate(){
em = [select id,name,HtmlValue,body from EmailTemplate where Id=: selectedTemplate];

}
public temp() {
}

list<EmailTemplate> temp1=[SELECT id ,Name,HtmlValue FROM EmailTemplate  ORDER by Name ASC];
public list<EmailTemplate> gettemp1(){
return temp1;

 }
 }


<-............................->
problem is that . tab is not working ..when we click on other its not work .plz check it on your end

How can we make a vertical tab in visualforce page