In this tutorial, we will create an HTML, CSS and jQuery with simple labels. Create a label component is actually a simple task, although it may not seem it at first, obviously depending on your skill level. Also it depends on how hard you want to promote your tags are, but for the sake of this tutorial, I keep it simple.

A label is a very good way of grouping a large number of contents into a very small space.

Complete HTML code



<div class="tabs_wrap">


<ul class="tabs_nav">


<li class="active"><a href="#tab1">Tab Name 1</a></li>




<li><a href="#tab2">Tab Name 2</a></li>




<li><a href="#tab3">Tab Name 3</a></li>


</ul>




<div class="tab_content">


<div id="tab1" class="tab active">


<h2>Heading Tab 01</h2>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae eleifend est, vitae convallis massa. Pellentesque vel est non purus consequat porta ut quis lacus. Vivamus placerat tempor mauris a aliquam. Vestibulum non tortor massa. Aenean gravida condimentum arcu, ac posuere justo rhoncus vel. Integer efficitur lacinia libero et sodales. Vivamus posuere blandit justo, ut placerat nibh aliquam non. Curabitur id nisl et libero laoreet luctus.
    </div>


<!-- .tab -->


<div id="tab2" class="tab">


<h2>Heading Tab 02</h2>


IEtiam aliquet condimentum consectetur. Aliquam vel lorem elit. Aliquam in ligula eget erat malesuada iaculis. Proin mattis eu urna non lacinia. Praesent convallis efficitur quam. Praesent quis leo lobortis enim convallis condimentum. Vivamus molestie eros id mi aliquam efficitur. Aliquam id libero quis nisl porttitor aliquet.
    </div>


<!-- .tab -->


<div id="tab3" class="tab">


<h2>Heading Tab 03</h2>


Sed suscipit feugiat leo ac vehicula. Nulla facilisi. Sed ultrices hendrerit felis nec eleifend. Etiam fermentum placerat ex, vel egestas dui eleifend posuere. Curabitur pharetra nunc ligula, vitae pulvinar metus eleifend non. Integer molestie tellus neque, ac varius ligula ornare eu. Cras eu ex et lorem euismod rutrum ut ac quam. Sed iaculis egestas quam, ac dignissim lorem volutpat at. Integer hendrerit ipsum justo, sed pulvinar elit congue pellentesque. Morbi non iaculis urna. 
    </div>


<!-- .tab -->
</div>


<!-- .tab_content -->
</div>


<!-- .tabs_wrap -->

HREF value should be the same in the corresponding label DIV id added at the beginning of “#.”

Complete CSS code

body {
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    background:#bde2e4;
    color:#2d2c28;
    margin:0;
    padding:0;
}
 
a,a:visited {
    color:#6d9a9c;
    outline:none;
}
 
h2 {
    margin-top:0;
    font-size:17px;
}
 
.tabs_wrap {
    width:960px;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    background:#bde2e4;
    color:#2d2c28;
    margin:0 auto;
    padding:30px 0;
}
 
.tabs_nav {
    list-style:none;
    margin:0;
    padding:0;
}
 
.tabs_nav li {
    display:inline;
}
 
.tabs_nav a {
    display:inline-block;
    height:36px;
    line-height:36px;
    background:#e7f2f2;
    color:#879291;
    text-decoration:none;
    font-weight:700;
    border-radius:8px 8px 0 0;
    margin:0 2px 0 0;
    padding:0 20px;
}
 
.tabs_nav li.active a,.tabs_nav a:hover {
    background:#fff;
    text-decoration:none;
}
 
.tab_content {
    background:#fff;
    overflow:hidden;
    line-height:21px;
    box-shadow:1px 1px 2px #8bb7b9;
}
 
.tab_content p {
    margin-bottom:0;
}
 
.tab {
    display:none;
    padding:20px;
}
 
.tab h2 {
    margin-top:0;
    font-size:16px;
    color:#6d9a9c;
}
 
.tab.active {
    display:block;
}

Complete jQuery code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery('.tabs_nav a').on('click', function(e)  {
        var targetTab = jQuery(this).attr('href');
        jQuery(targetTab).show().siblings().hide();
         jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
         e.preventDefault();
    });
});
</script>