Beispiel: ohne großes Framework
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>page browser</title>
<link rel="stylesheet" type="text/css" href="pages.css" />
</head>
<body>
<ul class="pages">
<li>
<p>Seite 1</p>
</li>
<li>
<p>Seite 2</p>
</li>
<li>
<p>Seite 3</p>
</li>
</ul>
<script src="pages.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
function Pages(pageslist) {
var current = 0;
var pages = pageslist.children;
var navi = document.createElement("ul");
navi.className = "pagenavi";
pageslist.parentNode.insertBefore(navi, pages.nextSibling);
function toggle(event) {
navi[current].classList.remove("active");
pages[current].classList.remove("active");
current = this.pageid;
navi[current].classList.add("active");
pages[current].classList.add("active");
event.stopPropagation();
}
for (var i=0; i<pages.length; i++) {
if (pages[i].classList.contains("active")) {
current = i;
};
var nav = document.createElement("li");
nav.appendChild(document.createTextNode(i+1));
nav.pageid = i;
navi.appendChild(nav);
nav.addEventListener('mousedown', toggle);
}
navi = navi.children;
navi[current].classList.add("active");
pages[current].classList.add("active");
}
var pagesList = document.querySelectorAll("ul.pages");
for (var i=0; i<pagesList.length; i++) {
new Pages(pagesList[i]);
}
})();
Stylesheet:
ul.pagenavi, ul.pages {
font-family: Arial,sans-serif;
position: relative;
margin: 0;
width: 100%;
list-style: none;}
ul.pagenavi {
padding-left: 0;
}
ul.pagenavi > li {
position: relative;
float: left;
display: block;
color: #666;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 5px;
margin: 3px;
top: 2px;
background-color: #eee;
}
ul.pagenavi > li:not(.active):hover {
cursor: pointer;
}
ul.pagenavi > li.active {
background-color: #fff;
}
ul.pages {
padding: 0 0 10px 0;
clear: both;
}
ul.pages > li {
padding: 10px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background-color: #fff;
display: none;
}
ul.pages > li::after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
ul.pages > li.active {
display: block;
}
