Training Tab

Creating Tab function

by Tamil

HTML

<div>
  <ul id="tabs">
  
  <li class="active tab1">Tab 1</li>
  <li class="tab2">Tab 2</li>
  <li  class="tab3">Tab 3</li>
  <li class="tab4">Tab 4</li>
  
  </ul>
</div>

<div class="tabContent">
  
  <div class="Content tab1" style="display:block;">
    111
  </div>
  
  <div class="Content tab2">
    222
  </div>
  
  <div class="Content tab3">
    333
  </div>
  
  <div class="Content tab4">
    444
  </div>
    
</div>

CSS

div ul {
  
  width: 100%;  
  display: flex;
}
#tabs li {
  
  list-style-type:none;  
  padding: 10px;
  margin: 0px 10px;
  color: #ffffff;
  background-color: #0099cc;
  cursor: pointer;
}
.active {
  
  background-color: #9d3 !important;
  color: #000 !important;
  
}
.tabContent{
  
    width: 100%;
    padding: 10px;
    background-color: #eeeeee;
}

.Content{
  
  display: none;
}

JavaScript

$(document).ready(function(){

	
  $('#tabs li').click(function(){
  
  	var getClass = $(this).attr("class"); 
    $("li").removeClass("active");
    $(this).addClass("active");    
    $(".Content").css("display","none");
    $("."+getClass).css("display","block");
    
  });
 

});