THEMETRIAL

Simple Fast Vanilla JavaScript Tabs

Author:zoltantothcom
Views Total:0 views
Official Page:Go to website
Last Update:January 19, 2021
License:MIT

Preview:

Simple Fast Vanilla JavaScript Tabs

Description:

A simple, lightweight, blazing-fast tabs vanilla JavaScript library for the web.

How to use it:

1. Add the JavaScript vanilla-js-tabs.js and Stylesheet vanilla-js-tabs.css to the page.

<link rel="stylesheet" href="https://www.cssscript.com/vanilla-js-tabs.css" />
<script src="vanilla-js-tabs.min.js"></script>

2. The required HTML structure for the tabs.

<div class="js-tabs" id="tabs">
  <ul class="js-tabs__header">
    <li><a class="js-tabs__title" href="https://www.cssscript.com/#">Tab 1</a></li>
    <li><a class="js-tabs__title" href="https://www.cssscript.com/#">Tab 2</a></li>
    <li><a class="js-tabs__title" href="https://www.cssscript.com/#">Tab 3</a></li>
  </ul>
  <div class="js-tabs__content">
    <h1>Tab 1</h1>
  </div>
  <div class="js-tabs__content">
    <h1>Tab 2</h1>
  </div>
  <div class="js-tabs__content">
    <h1>Tab 3</h1>
  </div>
</div>

3. Initialize the tabs plugin.

var tabs = new Tabs({
    elem: "tabs"
});

4. Determine which tab should be open on page load.

var tabs = new Tabs({
    elem: 'tabs',
    open: 2
});

5. Open a specific tab.

tabs.open(2);

6. Update the tabs.

tabs.update(2);

7. Destroy the instance.

tabs.destroy();


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.