UI Tabs

UI Tabs.html

 <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab1</li>
    <li class="tab-link" data-tab="tab-2">Tab2</li>
 </ul>
        
 <div class="tab-content">
    <div id="tab-1" class="tab-data current">
      123
    </div>   
    <div id="tab-2" class="tab-data"> 
      456           
    </div>
 </div>

<script>
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
    
        $('ul.tabs li').removeClass('current');
        $('.tab-data').removeClass('current');
    
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });
</script>

uitabs.css

    ul.tabs { 
      margin: 0;
      padding: 0;
      list-style: none; 
    }
    
    ul.tabs li{ 
      background: #ffffff; 
      color: #333333; 
      display: inline-block; 
      cursor: pointer; 
      padding: 20px 25px;
    }
    
    ul.tabs li:hover{ 
      background: lightgrey;
      color: #333333;
    }
    
    ul.tabs li.current{ 
      background: lightgrey; 
      color: #333333;
    }
    
    .tab-content .tab-data { 
      display: none; 
    }
    
    .tab-content .tab-data.current { 
      display: block;
    }