Cross-page Tab Navigation Plugins With jQuery - simpletabs

Cross-page Tab Navigation Plugins With jQuery - simpletabs
File Size: 14.2 KB
Views Total: 81
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

simpletabs is a jQuery plugin for creating tab navigation that can be reused across different HTML pages of your website.

How to use it:

1. Import jQuery JavaScript library and the simpletabs plugin's files into HTML pages.

<link href="/path/to/jquery.simpletabs.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.simpletabs.js"></script>

2. Create an empty container to hold the tab navigation.

<div id="simpleTabsDemo"></div>

3. Config the tab navigation.

/* defaults: 
   tabs: [
     { id: 'demoTab1', label: 'Demo Tab 1', url: '#demoTab1'},
     { id: 'demoTab2', label: 'Demo Tab 2', url: '#demoTab2'}
   ]
*/
let tabsConfig = {
    tabs: [
      { 
        id: 'demoTab1', 
        label: 'Demo Tab 1', 
        url: 'index.html', 
        tooltip: 'Demo 1',
        tabClass: 'customTabClass',
        spacerClass: 'customSpacerClass',
      },
      // ...
    ]
};

4. Initialize the plugin and determine the current tab ID for each page. Done.

// index.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab1');

// demo2.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab2');

// demo3.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab3');

Changelog:

v1.2.0 (2021-04-24)

  • Add tabs[].tabClass and spacerClass to config

v1.1.0 (2021-04-23)

  • Added tooltip support

This awesome jQuery plugin is developed by peterthoeny. For more Advanced Usages, please check the demo page or visit the official website.