This time I will share jQuery Plugin and tutorial about Auto Generate Tabbed Navigation With jQuery – Taby, hope it will help you in programming stack.
Taby is a lightweight, SEO-friendly jQuery plugin used to automatically generate a semantic tabs navigation for tabbed content within the document.
Clicking on the tabs will switch between tabbed content with fade in and fade out animations.
How to use it:
1. Create the tabbed content following the HTML structure as follows:
01 |
<div id="tabs" class="tabs"> |
03 |
<div class="tabs__item"> |
04 |
<div class="tabs__item--content"> |
05 |
<h3 class="heading heading--medium">Title 1</h3> |
10 |
<div class="tabs__item"> |
11 |
<div class="tabs__item--content"> |
12 |
<h3 class="heading heading--medium">Title 2</h3> |
17 |
<div class="tabs__item"> |
18 |
<div class="tabs__item--content"> |
19 |
<h3 class="heading heading--medium">Title 3</h3> |
2. Download and insert the JavaScript file jquery.tabs.js after jQuery.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="js/jquery.tabs.js"></script> |
3. Call the function tabs() on the top container.
1 |
$(document).ready(function(){ |
4. This will generate a tabs navigation using HTML unordered list as follows:
2 |
<li class="tabs-nav__item tabs-nav_item--active">Title 1</li> |
3 |
<li class="tabs-nav__item">Title 2</li> |
4 |
<li class="tabs-nav__item">Title 3</li> |
5 |
<li class="tabs-nav__item">Title 4</li> |
5. Apply your own CSS styles to the tabs navigation.
2 |
<li class="tabs-nav__item tabs-nav_item--active">Title 1</li> |
3 |
<li class="tabs-nav__item">Title 2</li> |
4 |
<li class="tabs-nav__item">Title 3</li> |
5 |
<li class="tabs-nav__item">Title 4</li> |
This awesome jQuery plugin is developed by GrzegorzNecka. For more Advanced Usages, please check the demo page or visit the official website.
