Minimal Tab Menu Plugin In jQuery & Vanilla JavaScript
File Size: | 4.85 KB |
---|---|
Views Total: | 635 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A minimal clean tab menu (also called tabbed content, tabbing system) implemented in either jQuery and Vanilla JavaScript.
How to use it:
1. Add your tab list and tabbed content to the tabbing system.
<ul class="tab-list"> <li><a data-id="yoga" class="tab-item active" href="#" role="tab">Yoga</a></li> <li><a data-id="pilates" class="tab-item" href="#" role="tab">Pilates</a></li> <li><a data-id="hiit" class="tab-item" href="#" role="tab">HIIT</a></li> </ul> <div id="yoga" class="tab-inner active"> <p class="tab-text"> Yoga is a group of physical, mental, and spiritual practices or disciplines which originated in ancient India. Yoga is one of the six orthodox philosophical schools of Hinduism. </p> </div> <div id="pilates" class="tab-inner"> <p class="tab-text"> Pilates is a physical fitness system developed in the early 20th century by Joseph Pilates, after whom it was named. Pilates called his method "Contrology". </p> </div> <div id="hiit" class="tab-inner"> <p class="tab-text"> HIIT focuses on large, global muscles and Pilates works on the core, so when combined they work on both large and small muscle groups. This ensures a whole body focus. </p> </div>
2. The main CSS for the tabbing system.
.tab-list { display: flex; justify-content: center; } .tab-item { display: block; background: #ffffff; color: #333333; padding: 5px 10px; } .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", (e) => { e.preventDefault(); 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"); return false; }); });
Changelog:
2021-03-31
- Updated styles
This awesome jQuery plugin is developed by ryu0947. For more Advanced Usages, please check the demo page or visit the official website.