<div class="tabs-wrapper">
<!-- Tab List -->
<ul class="nav classic-tabs" role="tablist" aria-label="Example Label">
<li class="nav-item">
<button class="nav-link active" role="tab" aria-selected="true" aria-controls="example-1-tab" id="example-1">
Tab 1
</button>
</li>
<li class="nav-item">
<button class="nav-link" role="tab" aria-selected="false" aria-controls="example-2-tab" id="example-2" tabindex="-1">
Tab 2
</button>
</li>
<li class="nav-item">
<button class="nav-link" role="tab" aria-selected="false" aria-controls="example-3-tab" id="example-3" tabindex="-1">
Tab 3
</button>
</li>
<li class="nav-item">
<button class="nav-link" role="tab" aria-selected="false" aria-controls="example-4-tab" id="example-4" tabindex="-1">
Tab 4
</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" tabindex="0" role="tabpanel" id="example-1-tab" aria-labelledby="example-1">
<p>Example 1 content: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
minima.</p>
</div>
<div class="tab-content" tabindex="0" role="tabpanel" id="example-2-tab" aria-labelledby="example-2" hidden="">
<p>Example 2 content: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<div class="tab-content" tabindex="0" role="tabpanel" id="example-3-tab" aria-labelledby="example-3" hidden="">
<p>Example 3 content: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
minima.</p>
</div>
<div class="tab-content" tabindex="0" role="tabpanel" id="example-4-tab" aria-labelledby="example-4" hidden="">
<p>Example 4 content: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
minima.</p>
</div>
</div>
Based on the version from MDB:
https://mdbootstrap.com/components/tabs/#classic-tabs
To start using this component, some JavaScript is needed to initialize it.
Underneath is an example on how to achieve this and should be placed in the Additional component(s) script
section as documented in How to use.
<script>
/*
* This solution is based upon https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
*/
(function () {
var tabList = document.querySelectorAll('[role="tablist"]')[0];
var tabs = document.querySelectorAll('[role="tab"]');
var panels = document.querySelectorAll('[role="tabpanel"]');
// For easy reference
var keys = {
end: 35,
home: 36,
left: 37,
up: 38,
right: 39,
down: 40,
enter: 13,
space: 32
};
// Add or subtract depending on key pressed
var direction = {
37: -1,
38: -1,
39: 1,
40: 1
};
// Bind listeners
for (var i = 0; i < tabs.length; ++i) {
addListeners(i);
}
function addListeners (index) {
tabs[index].addEventListener('click', clickEventListener);
tabs[index].addEventListener('keydown', keydownEventListener);
tabs[index].addEventListener('keyup', keyupEventListener);
// Build an array with all tabs (<button>s) in it
tabs[index].index = index;
}
// When a tab is clicked, activateTab is fired to activate it
function clickEventListener (event) {
var tab = event.target;
$(tabs).removeClass('active');
$(tab).addClass('active');
activateTab(tab, false);
}
// Handle keydown on tabs
function keydownEventListener (event) {
var key = event.keyCode;
switch (key) {
case keys.end:
event.preventDefault();
// Activate last tab
focusLastTab();
break;
case keys.home:
event.preventDefault();
// Activate first tab
focusFirstTab();
break;
// Up and down are in keydown
// because we need to prevent page scroll >:)
case keys.up:
case keys.down:
determineOrientation(event);
break;
}
}
// Handle keyup on tabs
function keyupEventListener (event) {
var key = event.keyCode;
switch (key) {
case keys.left:
case keys.right:
determineOrientation(event);
break;
case keys.enter:
case keys.space:
activateTab(event.target);
break;
}
}
// When tab list aria-orientation is set to vertical,
// only up and down arrow should function.
// In all other cases only left and right arrow function.
function determineOrientation (event) {
var key = event.keyCode;
var vertical = tabList.getAttribute('aria-orientation') === 'vertical';
var proceed = false;
if (vertical) {
if (key === keys.up || key === keys.down) {
event.preventDefault();
proceed = true;
}
}
else {
if (key === keys.left || key === keys.right) {
proceed = true;
}
}
if (proceed) {
switchTabOnArrowPress(event);
}
}
// Either focus the next, previous, first, or last tab
// depending on key pressed
function switchTabOnArrowPress (event) {
var pressed = event.keyCode;
if (direction[pressed]) {
var target = event.target;
if (target.index !== undefined) {
if (tabs[target.index + direction[pressed]]) {
tabs[target.index + direction[pressed]].focus();
}
else if (pressed === keys.left || pressed === keys.up) {
focusLastTab();
}
else if (pressed === keys.right || pressed === keys.down) {
focusFirstTab();
}
}
}
}
// Activates any given tab panel
function activateTab (tab, setFocus) {
setFocus = setFocus || true;
// Deactivate all other tabs
deactivateTabs();
// Remove tabindex attribute
tab.removeAttribute('tabindex');
// Set the tab as selected
tab.setAttribute('aria-selected', 'true');
// Get the value of aria-controls (which is an ID)
var controls = tab.getAttribute('aria-controls');
// Remove hidden attribute from tab panel to make it visible
document.getElementById(controls).removeAttribute('hidden');
// Set focus when required
if (setFocus) {
tab.focus();
}
}
// Deactivate all tabs and tab panels
function deactivateTabs () {
for (var t = 0; t < tabs.length; t++) {
tabs[t].setAttribute('tabindex', '-1');
tabs[t].setAttribute('aria-selected', 'false');
}
for (var p = 0; p < panels.length; p++) {
panels[p].setAttribute('hidden', 'hidden');
}
}
// Make a guess
function focusFirstTab () {
tabs[0].focus();
}
// Make a guess
function focusLastTab () {
tabs[tabs.length - 1].focus();
}
}());
</script>