Beispiel: ohne großes Framework
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tabsheets</title>
<link rel="stylesheet" type="text/css" href="tabsheet.css" />
</head>
<body>
<ul class="tabsheets">
<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="tabsheet.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
function Tabsheets(tabsheets) {
var current = 0;
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")) {
current = i;
};
var tabName = sheets[i].querySelector(".sheet-header");
tabName.style.display = "none";
var txt = tabName.firstChild.cloneNode(false);
var tab = document.createElement("li");
tab.appendChild(txt);
tab.className = "tab";
tab.tabid = i;
tabs.appendChild(tab);
tab.addEventListener('mousedown', toggle);
}
tabs = tabs.children;
tabs[current].classList.add("active");
sheets[current].classList.add("active");
}
var tabsheetsList = document.querySelectorAll("ul.tabsheets");
for (var i=0; i<tabsheetsList.length; i++) {
new Tabsheets(tabsheetsList[i]);
}
})();Stylesheet:
ul.tabs, ul.tabsheets {
font-family: Arial,sans-serif;
position: relative;
margin: 0;
width: 100%;
list-style: none;}
ul.tabs {
z-index: 10;
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 {
padding: 0 0 10px 0;
z-index: 2;
clear: both;
}
ul.tabsheets > li {
padding: 10px 10px 10px 10px;
z-index: 3;
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background-color: #fff;
display: none;
}
ul.tabsheets > li::after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
ul.tabsheets > li.active {
display: block;
}