SimpleTab

Simple tab plugin with jQuery

Features

• A tab plug-in containing only the essential features :-)
• Enable to styling with custom CSS
• Access index with URL parameters
• Assignment of unused tab.
• Enable to link external.

Data Attribute Settings

Import

<!-- Stylesheet for Default Skin (Optional) --> <link rel="stylesheet" href="paths/simpletab.min.css">  <!-- jQuery Libraries --> <script src="paths/jquery-3.4.1.min.js"></script> <script src="paths/simpletab.min.js"></script>

HTML

<!-- Tab --> <ul class="tab" data-tab-name="tabExample">     <li><a href="#content1">TAB1</a></li>     <li><a href="#content2">TAB2</a></li>     <li><a href="#content3">TAB3</a></li>     <li><a href="http://google.com" target="_blank">Link</a></li><!-- External link --> </ul>  <!-- Content --> <div id="content1">     Content of TAB 1 </div>  <div id="content2">     Content of TAB 2 </div>  <div id="content3">     Content of TAB 3 </div>

• Tabs must be written with tag <a> and link with content's id.
• 'data-tab-name' is name for parameter with index of tab to access. You can customize this name.
• Assign starting index and dimmed Index with library options not inline class in markup.

Access of tab index with URL parameters

../filename.html?tabExample=2

• 'tabExample' is tab name linked with data-tab-name of tab object in markup.
• Indexs start with 0 base.
• In case of that there is multiple tabs, Separate parameters with '&' like this.

../filename.html?tabName1=2&tabName2=1

jQuery

Default Skin

jQuery(document).ready(function($){     $(".tab").simpleTab({         defaultSkin: true  //default value: false     }); });

Custom Skin

CSS can be written freely, Assign class name for current and unable tab in library options.

jQuery(document).ready(function($){     // set class of active tab & dimmed tab for styling custom skin     $(".tab").simpleTab({         onTabClass: 'selected',         dimmedTabClass: 'dimmed'     }); });

Callback

There is callback option running after tab changing.

jQuery(document).ready(function($){     $(".tab").simpleTab({         afterChange:function($content, prevIdx, currentIdx){             if(currentIdx == 2) alert("Welcome :) ID of this content is '" + $content.attr("id") + "'.");             else alert("Tab is toggled.");         }     }); });

Options

Sass Variables

Browser support

SimpleTab Works on IE7+ in addition to other modern browsers such as Chrome, Firefox, and Safari.

License

Copyright (c) 2019 Wookju Choi Licensed under the MIT license.