This time I will share jQuery Plugin and tutorial about Smart Customizable jQuery Tabs Plugin – Pretty Tabs, hope it will help you in programming stack.
Just another jQuery plugin which lets you create a customizable, hashtag-enabled tabs component for sectioned web content.
How to use it:
1. Import the required style sheet jquery-pretty-tabs.css into the webpage.
1 |
<link rel="stylesheet" href="jquery-pretty-tabs.css"> |
2. Add a list of tabs together with the sectioned content to the webpage.
02 |
<ul class="tabs__items"> |
03 |
<li class="tabs__item tabs_active">Item 1</li> |
04 |
<li class="tabs__item">Item 2</li> |
05 |
<li class="tabs__item">Item 3</li> |
07 |
<div class="tabs__content-wrapper"> |
08 |
<div class="tabs__content tabs_active">Content 1</div> |
09 |
<div class="tabs__content">Content 2</div> |
10 |
<div class="tabs__content">Content 3</div> |
3. You can add an unique hash tag using the data-hash attribute so the tab can be opened using the URL with that hash tag.
1 |
<li class="tabs__item" data-hash="#item2">Item 2</li> |
4. Place jQuery library and the JavaScript file at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="dist/jquery-pretty-tabs.js"></script> |
5. Override the default styles in the jquery-pretty-tabs.scss as follows.
1 |
$tabs-border-color: #ddd; |
2 |
$tabs-border-color-over: #fff; |
4 |
$tabs-color_active: #55595c; |
This awesome jQuery plugin is developed by swimmwatch. For more Advanced Usages, please check the demo page or visit the official website.
