Handy Animated jQuery Tabs Plugin - easyTabs.js

easyTabs.js is a simple, flexible, lightweight, animated jQuery tabs plugin which helps you create tab navigation to switch between different sections of web content.

How to use it:

1. Create the tab navigation and tabbed content following the markup structure like so:

<div class="simple-tab">
  <ul>
    <li class="active">Bootstrap</li>
    <li>jQuery</li>
    <li>Vue.js</li>
    <li>React</li>
    <li>AngularJS</li>
  </ul>
  <div>
    <div class="active">
      <p>
        Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
      </p>        
    </div>
    <div>
      <p>
        jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
      </p>               
    </div>
    <div>
      <p>
        Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
      </p>   
    </div>
    <div>
      <p>
       AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, etc.
      </p>            
    </div>
    <div>
      <p>
        React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
      </p>            
    </div>
  </div>
</div>

2. Include both jQuery.easyTabs.js and jQuery JavaScript library at the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.easyTabs.js"></script>

3. Activate the tabs plugin.

$(".simple-tab").tabs();

4. The basic CSS styles for the tabs.

.simple-tab { font-size: 14px; }

.simple-tab>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.simple-tab>ul>li {
  cursor: pointer;
  display: inline-block;
  background-color: #666;
  color: white;
  padding: 5px 10px;
  border-radius: 8px 8px 0 0;
}

.simple-tab>ul>li.active {
  background-color: #fafafa;
  color: black;
}

.simple-tab>div {
  padding: 10px 20px;
  background-color: #fafafa;
  color: black;
  border-radius: 0 8px 8px;
}

.simple-tab>div>div { display: none; }

.simple-tab>div>div.active { display: block; }

5. Change the default trigger event.

$(".simple-tab").tabs({
  type: "mouseover", // or 'click'
});

6. Config the animation when switching between tabbed content.

$(".simple-tab").tabs({

  // animation speed in milliseconds
  speed: 0, 

  // "toogle", "slide", "fade"
  animation: "toogle"
  
});

---

This awesome jQuery plugin is developed by ZRC-Struggling. For more Advanced Usages, please check the demo page or visit the official website.