44 lines
1 KiB
HTML
44 lines
1 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="pagination">
|
||
|
|
<a href="#" data-page="1">1</a>
|
||
|
|
<a href="#" data-page="2">2</a>
|
||
|
|
<a href="#" data-page="3">3</a>
|
||
|
|
<a href="#" data-page="4">4</a>
|
||
|
|
<a href="#" data-page="5">5</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="content">
|
||
|
|
<div data-page="1">
|
||
|
|
<h1>Stránka 1</h1>
|
||
|
|
<p>Obsah stránky 1.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div data-page="2" style="display: none;">
|
||
|
|
<h1>Stránka 2</h1>
|
||
|
|
<p>Obsah stránky 2.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const pagination = document.getElementById('pagination');
|
||
|
|
const content = document.getElementById('content');
|
||
|
|
const pages = content.querySelectorAll('[data-page]');
|
||
|
|
|
||
|
|
pagination.addEventListener('click', (event) => {
|
||
|
|
const pageNumber = event.target.dataset.page;
|
||
|
|
|
||
|
|
// Skryjeme všechny stránky
|
||
|
|
pages.forEach(page => page.style.display = 'none');
|
||
|
|
|
||
|
|
// Zobrazíme vybranou stránku
|
||
|
|
const selectedPage = content.querySelector(`[data-page="${pageNumber}"]`);
|
||
|
|
selectedPage.style.display = 'block';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|