0

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

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

4
  • По скольку указано javascript, мне пришло в голову, что вы хотите что бы текущий контент страницы скрываля, а на его месте появлялся следующий блок информации? 9 окт 2011 в 7:41
  • Возможно, я не очень разбираюсь в javascript, напишите я попробую. 9 окт 2011 в 7:58
  • вам нужно текст разбить на страницы или все страницы разные? Разные - в смысле разный дизайн и/или разные менюшки, там, баннеры
    – Sh4dow
    9 окт 2011 в 18:46
  • Все меню и дизайн одинаковые 10 окт 2011 в 16:47

5 ответов 5

4

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

1

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

0

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

2
  • А как это сделать? 9 окт 2011 в 11:22
  • Фреймы лучше оставить на крайний случай. От них Ваш сайт не много выиграет, если вообще выиграет...
    – 3JIoi_Hy6
    9 окт 2011 в 19:04
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>
1
  • Спасибо, это, то, что нужно 10 окт 2011 в 16:31
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>
3
  • Мне надо html, а jQuery мне на данный момент не надо, можете пожалуйста по подробней про 2 способ 9 окт 2011 в 8:00
  • а второй метод тоже на jQuery основан. я думаю, Вы знаете, что HTML - язык разметки. в нём нет методов обработки событий со стороны пользователя. то есть то, что Вы задумали не совершите только с помощью HTML. задумка в том, что Вы в разметку добавляете, так называемый, шаблон. он находится в комментарии и первоначально на странице не отображается. но в дереве DOM он присутствует. мы этим и пользуемся, совершая выборку и заменяя содержимым этого шаблона содержимое первоначальной страницы.
    – LeD4eG
    9 окт 2011 в 8:17
  • Спасибо, только как это оформить? Пожалуйста начиная от <html> и заканчивая </html> 9 окт 2011 в 8:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.