0

Я хочу, чтобы в одном html файле было несколько страниц. Если мы нажимаем на кнопку далее, то преходящим на следующю страницу, но не на следующий файл который содержит эту страницу.

Пожалуйста, можете детально описать.

Nicolas Chabanovsky
  • 51,426
  • 87
  • 267
  • 507
Karlos Derga
  • 189
  • По скольку указано javascript, мне пришло в голову, что вы хотите что бы текущий контент страницы скрываля, а на его месте появлялся следующий блок информации? – Sergii Kozlov Oct 09 '11 at 07:41
  • Возможно, я не очень разбираюсь в javascript, напишите я попробую. – Karlos Derga Oct 09 '11 at 07:58
  • вам нужно текст разбить на страницы или все страницы разные?

    Разные - в смысле разный дизайн и/или разные менюшки, там, баннеры

     – Sh4dow Oct 09 '11 at 18:46
  • Все меню и дизайн одинаковые – Karlos Derga Oct 10 '11 at 16:47

5 Answers5

4

Может за вас еще и деньги получить? :) Все просто: делаем несколько блоков-страниц, всем кроме первой присваиваем css-свойство display со значением none, а на ссылки "далее/назад" навешиваем js-обработчик (onclick), который меняет значение этого элемента с none на block. Тут даже jQuery не нужен, обычный DHTML. Можете начать отсюда: DHTML Tutorial.

neoascetic
  • 2,086
1

Если я правильно понял вопрос, то подобное уже озвучивалось. Ознакомьтесь.

Дух сообщества
  • 1
3JIoi_Hy6
  • 912
0

Есть два пути:

  1. Можно воспользоваться методом jQuery .load(), чтобы при нажатии на кнопку в определённый раздел подгружалась нужная страница. почитайте вот тут.
  2. Второй путь немного сумасброднее и сложнее для понимания: пишет большую страницу, на которой часть разделов изначально скрыто. в качестве шаблона, например <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>
Nicolas Chabanovsky
  • 51,426
  • 87
  • 267
  • 507
LeD4eG
  • 2,286
  • Мне надо html, а jQuery мне на данный момент не надо, можете пожалуйста по подробней про 2 способ – Karlos Derga Oct 09 '11 at 08:00
  • а второй метод тоже на jQuery основан. я думаю, Вы знаете, что HTML - язык разметки. в нём нет методов обработки событий со стороны пользователя. то есть то, что Вы задумали не совершите только с помощью HTML. задумка в том, что Вы в разметку добавляете, так называемый, шаблон. он находится в комментарии и первоначально на странице не отображается. но в дереве DOM он присутствует. мы этим и пользуемся, совершая выборку и заменяя содержимым этого шаблона содержимое первоначальной страницы. – LeD4eG Oct 09 '11 at 08:17
  • Спасибо, только как это оформить? Пожалуйста начиная от и заканчивая – Karlos Derga Oct 09 '11 at 08:40
0

Ну я так понял, вам нужен чистый html. Почитайте про фреймы. Но вообще не лучшее решение. Я бы сделал на пхп, или с ajax'ом))

angry
  • 8,677
  • 18
  • 74
  • 182
thedarkelf
  • 199
  • 2
  • 9
  • 23
0
<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>&nbsp;&nbsp;<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>
Antah
  • 1