Я хочу, чтобы в одном html файле было несколько страниц. Если мы нажимаем на кнопку далее, то преходящим на следующю страницу, но не на следующий файл который содержит эту страницу.
Пожалуйста, можете детально описать.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЯ хочу, чтобы в одном html файле было несколько страниц. Если мы нажимаем на кнопку далее, то преходящим на следующю страницу, но не на следующий файл который содержит эту страницу.
Пожалуйста, можете детально описать.
Может за вас еще и деньги получить? :)
Все просто: делаем несколько блоков-страниц, всем кроме первой присваиваем css-свойство display
со значением none
, а на ссылки "далее/назад" навешиваем js-обработчик (onclick)
, который меняет значение этого элемента с none
на block
. Тут даже jQuery не нужен, обычный DHTML.
Можете начать отсюда: DHTML Tutorial.
Ну я так понял, вам нужен чистый html. Почитайте про фреймы. Но вообще не лучшее решение. Я бы сделал на пхп, или с ajax'ом))
<div id = 'page01'>
<h1>Первая страница</h1>
Содержание страницы 1<br>
Это первая страница<br>
Не вторая, не третья<br>
Это только первая страница! Это начало!<br>
<br><br>
<a href = '#' onclick = "document.getElementById('page01').style.display='none'; document.getElementById('page02').style.display='block';">Вперед</a>
</div>
<div id = 'page02' style='display: none'>
<h1>Вторая страница</h1>
Содержание страницы 2<br>
Это вторая страница<br>
Не первая, не третья<br>
Это только вторая страница!<br>
<br><br>
<a href = '#' onclick = "document.getElementById('page02').style.display='none'; document.getElementById('page01').style.display='block';">Назад</a> <a href = '#' onclick = "document.getElementById('page02').style.display='none'; document.getElementById('page03').style.display='block';">Вперед</a>
</div>
<div id = 'page03' style='display: none'>
<h1>Третья страница</h1>
Содержание страницы 3<br>
Это последняя страница<br>
Не первая, не вторая<br>
Это конец!<br>
<br><br>
<a href = '#' onclick = "document.getElementById('page03').style.display='none'; document.getElementById('page02').style.display='block';">Назад</a>
</div>
Есть два пути:
.load()
, чтобы при нажатии на кнопку в определённый раздел подгружалась нужная страница. почитайте вот тут.<div id="template">
. в этом шаблоне будет находится содержимое другой страницы. при щелчке по кнопке копируем это содержимое и вставляем в <body>
"главной" страницы. Например вот так:
var templateСontent = $('#template').children().clone();
$('body').empty().append(templateСontent);
// или $('body').replaceWith(templateContent);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.ru">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Add New Page</title>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript"
$(function () {
$('div#template').css('display', 'none');
$('button').click(function () {
var templateContent = $('#template').children().clone();
$('#paste_page').replaceWith(templateContent);
});
});
</script>
</head>
<body>
<!--Шаблон-->
<div id="template">
<p>Новое содержимое страницы</p>
</div>
<div id="paste_page">
<p>Содержимое страницы</p>
</div>
<button>Обновить содержимое</button>
</body>
</html>