Beispiel: ohne großes Framework, eine Unordered List (<ul>) mit List Items (<li>), zum setzen der einheitlichen Höhe in den Tabeinträgen ist einfach die Class "equal-height" der Unordered List (<ul>) hinzuzufügen.
-
JavaScript
Javascript Beispiele (jsAnimations.js):
- jsTree
- jsTabs
- jsAccordion
- jsFade
-
Lazarus und Free Pascal
Free Pascal Beispiele:
...
-
PHP
PHP Beispiele:
...
JavaScript, Free Pascal oder PHP
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tabsheets</title>
<link rel="stylesheet" type="text/css" href="tabsheets.css" />
</head>
<body>
<ul class="tabsheets equal-height">
<li class="active">
<h4 class="sheet-header">JavaScript</h4>
<h5 id="javascript">Javascript Beispiele (jsAnimations.js):</h5>
<ul>
<li>jsTree</li>
<li>jsTabs</li>
<li>jsAccordion</li>
<li>jsFade</li>
</ul>
</li>
<li>
<h4 class="sheet-header">Lazarus und Free Pascal</h4>
<h5>Free Pascal Beispiele:</h5>
<p>…</p>
</li>
<li>
<h4 class="sheet-header">PHP</h4>
<h5 id="php">PHP Beispiele:</h5>
<p>…</p>
</li>
</ul>
<p><a href="#javascript">JavaScript</a>, <a href="#freepascal">Free Pascal</a> oder <a href="#php">PHP</a></p>
<script src="tabsheets.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
let localLinks = document.querySelectorAll("[href^='#']");
let hash = window.location.hash;
let anchor = null;
if (hash) {
let id = hash.substring(1);
anchor = document.getElementById(id);
}
function Tabsheets(tabsheets) {
let current = -1;
let sheets = tabsheets.children;
let tabs = document.createElement("ul");
let store = tabsheets.dataset.store;
if (store) {
store = 'tabsheets-' + window.location.pathname + '-' + store;
}
tabs.className = "tabs";
tabs.setAttribute('role', 'tablist');
tabsheets.parentNode.insertBefore(tabs, tabsheets);
let useSessionStorage = true;
function toggle(event) {
tabs[current].classList.remove("active");
sheets[current].classList.remove("active");
current = this.tabid;
tabs[current].classList.add("active");
sheets[current].classList.add("active");
event.stopPropagation();
if (store) {
sessionStorage.setItem(store, current);
}
}
for (let i=0; i<sheets.length; i++) {
if (anchor && sheets[i].contains(anchor)) {
if (current > -1) {
sheets[current].classList.remove("active");
}
sheets[i].classList.add("active");
current = i;
useSessionStorage = false;
} else if (sheets[i].classList.contains("active")) {
if (current > -1) {
sheets[i].classList.remove("active");
} else {
current = i;
}
};
let txt, tabName = sheets[i].querySelector(".sheet-header");
if (tabName) {
txt = tabName.firstChild.cloneNode(false);
} else {
txt = document.createTextNode('undefined');
}
let tab = document.createElement("li");
tab.appendChild(txt);
tab.className = "tab";
tab.setAttribute('tabindex', '0');
tab.setAttribute('role', 'tab');
if (i === current) {
tab.classList.add("active");
}
tab.tabid = i;
tabs.appendChild(tab);
tab.addEventListener('click', toggle);
let ids = sheets[i].querySelectorAll("[id]");
for (let iId = 0; iId < ids.length; iId++) {
for (let ilocalLinks = 0; ilocalLinks < localLinks.length; ilocalLinks++) {
if (localLinks[ilocalLinks].href.split('#')[1] == ids[iId].id) {
localLinks[ilocalLinks].addEventListener('click', function (event) {
tab.click();
});
}
}
}
}
tabs = tabs.children;
if (useSessionStorage && sessionStorage.getItem(store)) {
if (current > -1) {
tabs[current].classList.remove("active");
sheets[current].classList.remove("active");
}
current = sessionStorage.getItem(store);
tabs[current].classList.add("active");
sheets[current].classList.add("active");
} else if (current === -1) {
current = 0;
tabs[current].classList.add("active");
sheets[current].classList.add("active");
}
}
let tabsheetsList = document.querySelectorAll("ul.tabsheets"), cnt = tabsheetsList.length, i;
if (cnt > 0) {
for (i = 0; i < cnt; i++) {
if (tabsheetsList[i].children && tabsheetsList[i].children.length > 0) {
new Tabsheets(tabsheetsList[i]);
}
}
// accessibility: handle tabindex enter keydown event
document.addEventListener('keydown', function(event) {
if (event.key === "Enter") {
if (event.target.classList.contains('tab')) {
event.target.click();
}
}
});
}
})();
Stylesheet:
ul.tabs,
ul.tabsheets {
font-family: Arial,sans-serif;
position: relative;
margin: 0;
width: 100%;
list-style: none;
}
ul.tabs {
padding-left: 0;
}
ul.tabs > li {
position: relative;
float: left;
display: block;
color: #666;
font-weight: bold;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 4px 4px 0px 0px;
padding: 3px 5px 2px;
top: 2px;
z-index: 1;
background-color: #eee;
}
ul.tabs > li:not(.active):hover {
background-color: #fff;
cursor: pointer;
}
ul.tabs > li.active {
padding: 4px 5px 3px;
top: 1px;
z-index: 10;
background-color: #fff;
}
ul.tabsheets {
box-sizing: border-box;
padding: 10px;
z-index: 2;
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background-color: #fff;
}
ul.tabsheets > li {
display: none;
}
ul.tabsheets > li.active {
z-index: 3;
display: block;
}
ul.tabsheets .sheet-header {
display: none;
}
ul.tabsheets.equal-height > li {
padding: 0;
visibility: hidden;
float: left;
width: 100%;
margin-right: -100%;
display: block;
}
ul.tabsheets.equal-height > li.active {
visibility: visible;
}
ul.tabs::after,
ul.tabsheets::after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
@media print {
ul.tabs {
display: none;
}
ul.tabsheets > li:not(:first-child) {
border-top: 1px solid #ccc;
}
ul.tabsheets.equal-height > li {
visibility: visible;
float: none;
margin-right: 0;
}
ul.tabsheets > li,
ul.tabsheets .sheet-header {
display: block;
}
}
