Cross-page Tab Navigation Plugins With jQuery - simpletabs

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.4 (2024-09-13)

• Add rounded corners

v1.2.3 (2022-02-23)

• Small refactor

v1.2.2 (2022-02-21)

• Small refactor

v1.2.1 (2021-08-13)

• JS & CSS updated

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.