🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, lightweight (~2.5kb minified), nice-looking jQuery tabs plugin used to show and hide tabbed content within the document.

tabs

Documentation

SimpleTab

Simple tab plugin with jQuery

default skin

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

Option Type Default Description
defaultSkin boolean false Use default skin
onTabClass string 'selected' Class name on <li> tag of current tab. Setting for user css.
dimmedTabClass string 'dimmed' Class name on <li> tag of disabled tab. Setting for user css.
startIndex int 0 Enable setting index of start. Start with 0 base.
dimmedIndexs int or string null set tabs to be couldn't clicking. Enable multiple items with separator ','. (ex) dimmedIndexs: '0, 1, 2' or dimmedIndexs: 1
fadeEffect boolean true Enable/Disable fade effect.
fadeSpeed int 400 Fade In/Out Speed.
afterChange function($content, prevIndex, currentIndex) null Callback function after changing tab. You can use connected parameters.

Sass Variables

Variable Type Default Description
$selected-class string '.selected' Selected tab class
$dimmed-class string '.dimmed' Dimmed tab class
$default-tab-bg-color color #f5f5f5 Color of default tab's background
$default-tab-text-color color #777777 Color of default tab's text
$default-tab-border-color color #dddddd Color of default tab's border
$selected-tab-bg-color color #ffffff Color of selected tab's background
$selected-tab-text-color color #000000 Color of selected tab's text
$selected-tab-border-color color #09c453 Color of selected tab's border
$selected-tab-border-width pixels 4px Thickness of selected tab's top border
$selected-tab-shadow-opacity float 0.1 Opacity of selected tab's shadow. Value must be 0 to 1.
$dimmed-tab-bg-color color #d5d5d5 Color of dimmed tab's background
$tab-content-padding pixels 30px Padding in detail contents of tab.

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.


You May Also Like