jQuery Plugin to Show a Tabs Bar for Navigation

The jquery.simpletabs plugin shows a navigation tab bar. Tabs can be selected once and shared across multiple HTML pages. Multiple tab bars can be displayed on a page for cross navigation.

simple jquery tabs, jquery mobile swipe tab navigation, vertical scrolling tabs jquery, tab responsive, easy responsive tabs, scrolling tabs jquery mobile

Mobile Style Bottom Tab Bar for Navigation in Pure CSS

How to make use of 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 carry 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 decide the present tab ID for every web page.

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

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

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

Cross-page Tab Navigation Plugins, jquery.simpletabs GIthub, swipeable tabs jquery, jquery horizontal tabs