The simplest Tab system ever using jQuery. It can be used with keyboard as well. SCSS for the CSS. Don't forget to include jQuery.

simple-tab-system-jquery.markdown

Simple Tab System (jQuery)

The simplest Tab system ever using jQuery. It can be used with keyboard as well. SCSS for the CSS. Don't forget to include jQuery.

See the Pen here by Ricardo Zea on CodePen.

License.

tabs.html

<div class="container">
    <h1>Simple Tab System.</h1>
    <h2>Accessible via keyboard as well.</h2>
    <p>Keyboard: Just click on page and press Tab.</p>
    <h3>Demo:</h3>
    
    <!-- Tab System starts -->
     <div class="tab-system-ctnr">
        <div class="tabs">
           <a href="#" class="tab-link current" data-tab="tab-1">Tab One</a>
           <a href="#" class="tab-link" data-tab="tab-2">Tab Two</a>
           <a href="#" class="tab-link" data-tab="tab-3">Tab Three</a>
           <a href="#" class="tab-link" data-tab="tab-4">Tab Four</a>
        </div>

        <div id="tab-1" class="tab-content current">
           <p>1111</p>
        </div>
        <div id="tab-2" class="tab-content">
           <p>2222</p>
        </div>
         <div id="tab-3" class="tab-content">
           <p>3333</p>
        </div>
         <div id="tab-4" class="tab-content">
           <p>4444</p>
        </div>
     </div>
     <!-- Tab System ends -->
    
    <hr>
    <h2>Issue:</h2>
    <p>Right now only one tab system per page is possible ¯\_(ツ)_/¯.</p>
    <hr>
    <p><small>Forked from 👉 <a href="https://codepen.io/cssjockey/pen/jGzuK" target="_blank" title="Link opens in a new tab.">Mohit Aneja's Pen.</a></small></p>

</div>
<!-- container -->

tabs.js

$(function() {
    //Tab System
    $(".tabs a").click(function(e) {
        //Variable
        var tabId = $(this).attr("data-tab");
        //Remove the class from any other tab
        $(".tabs a").removeClass("current");
        //Remove the class from any other content section
        $(".tab-content").removeClass("current");
        //Add a class to the tab when clicked
        $(this).addClass("current");
        //Add a class to the content section of the active tab
        $("#" + tabId).addClass("current");        
        //Stop the bubbling of the click to parent elements
        e.stopPropagation();
        //Stop the page from jumping to the top when clickin on a tab
        e.preventDefault();
    });
});

tabs.scss

//** TAB SYSTEM
.tab-system-ctnr {
   .tabs {
      //Tab
      a {
         background: none;
         color: #222;
         display: inline-block;
         padding: 10px 15px;
         cursor: pointer;
      }

      //Active tab
      a.current {
         background: #ededed;
         color: #222;
      }
   }
   
   //Tab content section
   .tab-content {
      display: none;
      background: #ededed;
      padding: 15px;
   }

   //Active Tab content section
   .tab-content.current { display: inherit; }
}


//Stuff not needed for demo
.container {
    width: 800px;
    margin: 0 auto;
}

hr {
    margin: 2em 0;
    border: none;
    border-top: 1px dotted #000;
}