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:
...
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>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>PHP Beispiele:</h5>
<p>…</p>
</li>
</ul>
<script src="tabsheets.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
function Tabsheets(tabsheets) {
var current = -1;
var sheets = tabsheets.children;
var tabs = document.createElement("ul");
tabs.className = "tabs";
tabsheets.parentNode.insertBefore(tabs, tabsheets);
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();
}
for (var i=0; i<sheets.length; i++) {
if (sheets[i].classList.contains("active")) {
if (current > -1) {
sheets[i].classList.remove("active");
} else {
current = i;
}
};
var tabName = sheets[i].querySelector(".sheet-header");
var txt = tabName.firstChild.cloneNode(false);
var tab = document.createElement("li");
tab.appendChild(txt);
tab.className = "tab";
tab.setAttribute('tabindex', '0');
if (i == current) {
tab.classList.add("active");
}
tab.tabid = i;
tabs.appendChild(tab);
tab.addEventListener('click', toggle);
}
tabs = tabs.children;
if (current == -1) {
current = 0;
tabs[current].classList.add("active");
sheets[current].classList.add("active");
}
}
var tabsheetsList = document.querySelectorAll("ul.tabsheets");
if (tabsheetsList.length > 0) {
for (var i=0; i<tabsheetsList.length; i++) {
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;
}
}
