jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

Overview

jquery.simpletabs v1.2.3

The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages. Multiple tabs bars can be shown on a page for nested navigation.

Sample screenshot

Usage

<link href="/path/to/jquery.simpletabs/jquery.simpletabs.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
<script src="/path/to/jquery.simpletabs.js" type="text/javascript" charset="utf-8"></script>
<script>
  let tabsConfig = {
    tabs: [
      {
        id:      'demoTab1',
        label:   'Demo Tab 1',
        tooltip: 'This is demo tab 1',
        url:     'demo-tab-1.html'
      }, {
        id:      'demoTab2',
        label:   'Demo Tab 2',
        tooltip: 'This is demo tab 2',
        url:     'demo-tab-2.html'
      }
    ]
  };
  $(document).ready(function() {
    $('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab1');
  });
</script>
<div id="simpleTabsDemo"></div>

Define the tabs configuration once as an object in a JavaScript file. Include that in your HTML pages, and pass the tabs configration object as the first parameter to .simpleTabs(). The second parameter indicates the ID of the active tab. Above example is for the first page demo-tab-1.html.

Configuration

Pass a configuration object to .simpleTabs():

{
  tabs: [
    {
      id:       'demoTab1',         // HTML ID of tab, must be unique per page, required
      label:    'Demo Tab 1',       // tab label, required
      tooltip:  'This is a demo',   // tooltip message for tab, optional
      url:      'demo-tab-1.html',  // page/anchor URL, required
      spacers:  2,                  // number of spacers preceeding tab, optional, default: 1
      tabClass: 'forAdminOnly',     // add classes to tab, optional, default: 'jqSimpleTabsTab'
      spacerClass: 'forAdminOnly'   // add classes to spacer, optional, default: 'jqSimpleTabsSpacer'
    },
    // etc...
  ],
  debug: false
}

Demo

See demo.html

You might also like...

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Apply IPO From Multiple Meroshare Accounts at Once.

Apply IPO From Multiple Meroshare Accounts at Once.

⚙️ HamroShare : Batch IPO Applier HamroShare is a minimal web-application that lets you apply for IPOs from multiple meroshare accounts at once. Note:

Nov 15, 2022

A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.

Scrollbox A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point. Demo Page Table of contents Browser compat

Jul 22, 2022

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! 💥 If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Aug 4, 2022

A demo to show how to re-use Eleventy Image’s disk cache across Netlify builds.

Re-use Eleventy Image Disk Cache across Netlify Builds Live Demo This repository takes all of the high resolution browser logos and processes them thr

Apr 5, 2022

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Aug 22, 2022

nodejs load balancing app to distribute http requests evenly across multiple servers.

nodejs load balancing app to distribute http requests evenly across multiple servers.

load-balancer-nodejs nodejs load balancing app to distribute http requests evenly across multiple servers. How to use ? Please edit the file 'config.j

Nov 7, 2022

I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com

Dec 31, 2022
Owner
Peter Thoeny
Peter Thoeny
LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

Hossein Khalili 3 May 3, 2022
Project to manage multiple emails at once with lots of customization. You can send and receive emails. Desktop notifications can be modified.

Technologies Used React Redux Tailwind CSS Features Admin dashboard User settings and or user dashboard send emails recive emails Connections through

Multi Email 9 Dec 17, 2022
🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

?? search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* <1kb). It can help you create instant search and/or facilitate n

Michael 4 Jun 16, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked. Desktop view Mobile v

Ellis 2 Feb 16, 2021
Add grouped tabsets, which remember the active tab across multiple HTML documents.

Grouped Tabsets See the extension in action. This quarto extension provides support for "grouped" tabsets in Quarto HTML documents. Consider the case

null 13 Sep 30, 2022
It's a tiny freeware library on TypeScript to sinhronize page scrolling and navigation meny-bar.

Scroll progress (dual-side-scroll) v1.2.3 Assignment This tiny plugin is designed to show the progress of the page scrolling interactively. There are

Evgeny 4 May 17, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

BCIT Design & Development Club (BCIT-DDC) 28 Dec 28, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022