Easy tabs

    <div class="atabs">
        <span class="atab">Content</span>
        <span class="atab">Design</span>
        <span class="atab">Layout</span>
    </div>
    <div class="atab_con">
        <div class="atab_co">Content</div>
        <div class="atab_co">Design</div>
        <div class="atab_co">Layout</div>
    </div>


<script>
jQuery(".atabs .atab").click(function() {
	jQuery(".atabs .atab").removeClass("active").eq(jQuery(this).index()).addClass("active");
	jQuery(".atab_co").hide().eq(jQuery(this).index()).fadeIn()
}).eq(0).addClass("active");
</script> 

<style>  
.atab {
  background: transparent;
  color: #000;
  border: 1px solid #ddd;
  padding: 0.4em 2em;
  border-radius: 100px;
  cursor: pointer;
}
  
.atabs .active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
  
.atab_co {
  display: none;
  width: 100%;
  padding: 40px 0 0 0;
}
.atab_co:first-child {
  display: block;
}
</style>