Press "Enter" to skip to content

Simple and Small Tab Menu With JavaScript and jQuery

Tab menu with JavaScript and jQuery is a tab menu plugin is a clean tab menu (also called tabbed content, tabbing system) implemented in both jQuery and Vanilla JavaScript.

javascript tabs, jquery tabs, tab slider jquery example, how to enable and disable tabs in jquery, jquery tab slider with content

How to make use of it:

1. Add your tab list and tabbed content to the tabbing system.

<ul class="tab-list">
  <li data-id="yoga" class="tab-item active">Tab 1</li>
  <li data-id="pilates" class="tab-item">Tab 2</li>
  <li data-id="hiit" class="tab-item">Tab 3</li>
</ul>
<div id="yoga" class="tab-inner active">
  <p class="tab-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="pilates" class="tab-inner">
  <p class="tab-text">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<div id="hiit" class="tab-inner">
  <p class="tab-text">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

2. The important CSS for the tabbing system.

.tab-list {
  display: flex;
  justify-content: center;
}

.tab-item {
  background: #ffffff;
  color: #333333;
  padding: 5px 10px;
  cursor: pointer;
}

.tab-item.active {
  background: #333333;
  color: #ffffff;
  border-radius: 5px 5px 0 0;
}

.tab-inner {
  display: none;
  background: #333333;
  padding: 15px;
}

.tab-inner.active {
  display: block;
}

3. Activate the tabbing system with vanilla JavaScript.

"use strict";
const tabItems = document.querySelectorAll(".tab-item");
const tabInners = document.querySelectorAll(".tab-inner");
tabItems.forEach((clickItem) => {
  clickItem.addEventListener("click", () => {
    tabItems.forEach((tabItem) => {
      tabItem.classList.remove("active");
    });
    clickItem.classList.add("active");
    tabInners.forEach((tabInner) => {
      tabInner.classList.remove("active");
    });
    document.getElementById(clickItem.dataset.id).classList.add("active");
  });
});

4. Activate the tabbing system with jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(function () {
  const tabItem = $(".tab-item");
  const tabInner = $(".tab-inner");
  tabItem.on("click", function () {
    tabItem.removeClass("active");
    $(this).addClass("active");
    tabInner.removeClass("active");
    $("#" + $(this).data("id")).addClass("active");
  });
});

Minimal Tab Menu Plugin, Tab menu Github, jquery animated tabs example, horizontal tab slider jquery, jquery tabs style


See Demo And Download

Official Website(ryu0947): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *