Smart Customizable jQuery Tabs Plugin - Pretty Tabs

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.

<link rel="stylesheet" href="jquery-pretty-tabs.css">

2. Add a list of tabs together with the sectioned content to the webpage.

<div class="tabs">
  <ul class="tabs__items">
    <li class="tabs__item tabs_active">Item 1</li>
    <li class="tabs__item">Item 2</li>
    <li class="tabs__item">Item 3</li>
  </ul>
  <div class="tabs__content-wrapper">
    <div class="tabs__content tabs_active">Content 1</div>
    <div class="tabs__content">Content 2</div>
    <div class="tabs__content">Content 3</div>
  </div>
</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.

<li class="tabs__item" data-hash="#item2">Item 2</li>

4. Place jQuery library and the JavaScript file at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery-pretty-tabs.js"></script>

5. Override the default styles in the jquery-pretty-tabs.scss as follows.

$tabs-border-color: #ddd;
$tabs-border-color-over: #fff;
$tabs-color: #000;
$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.