Simple Tab using Jquery

In this tutorial, I'll show you how to make Simple Tab using Jquery.

Click Here for DEMO

First thing, we need HTML to create tab heading and tab content. Here is the code:

HTML

<h2>Simple Tab using Jquery</h2>
<div class="tab">
   <ul class="tab-list">
      <li><a href="#" id="tab1" class="active">Tab 1</a></li>
      <li><a href="#" id="tab2">Tab 2</a></li>
      <li><a href="#" id="tab3">Tab 3</a></li>
   </ul>
   <div class="tab-wrap">
      <div class="tab-content tab1 active">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, vitae nihil, doloribus beatae, molestias iusto dicta repudiandae eius illo amet perferendis eum fugit dolorum sapiente exercitationem, totam dolores iste dolore.</p>
      </div>
      <div class="tab-content tab2">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam itaque earum illo omnis ratione quas iste, dolorum blanditiis, repellendus magni laborum neque suscipit dicta soluta consectetur repudiandae incidunt, nisi non.</p>
      </div>
      <div class="tab-content tab3">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus dolorum nemo ratione non eligendi, quas modi sequi, dignissimos maiores.</p>
      </div>
   </div>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS

.tab{
   .tab-list{
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;

      li{
         float: left;
      }

      a{
         display: block;
         border: 2px solid #1e9f75;
         border-bottom: 0;
         color: #1e9f75;
         text-decoration: none;
         padding: 8px 20px;
         margin: 0 2px 0 0;
         transition: background 0.3s linear, color 0.3s linear;
         -webkit-transition: background 0.3s linear, color 0.3s linear;

         &.active,
         &:hover{
            background: #1e9f75;
            color: #fff;
         }
      }
   }

   .tab-wrap{
      background: #1e9f75;
      color: #fff;
      padding: 20px;
   }

   .tab-content{
      display: none;

      &.active{
         display: block;
      }
   }
}

Finally, we need Jquery Code to make simple tab for your project. So, here's the Jquery below.
Jquery

$(function(){
 $('.tab-list').on('click', 'a', function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
  var id = this.id;
  $('.' + id).addClass('active');
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!