jQuery Plugin to Show a Tabs Bar for Navigation | simpletabs

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

See Demo And Download

Official Website(peterthoeny): Click Here

This superior jQuery/javascript plugin is developed by peterthoeny. For extra Advanced Usages, please go to the official website.

Related Posts


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…


A Modern GIF | Emoji Picker Vue3 Components For Your App

vue3 discord picker is a new emoji/gif picker for your app! based on disagreement. This component is only available in vue3. Reworking the Print and Configuration API….


Animated Neon Light Buttons Animation Effects In Pure CSS

Animated Neon Buttons is a set of neon buttons with animated reflections and borders, written in pure CSS/CSS3. Must Read: Simple Superb Animations Particle Effect Buttons For…


A Lightweight Javascript Library For Zooming / Enlarging Images | Zoom.js

Smooth Zoom is a lightweight javascript library for enlarging images like Medium, and Google Photos, which displays images at a large size just like you saw it…