Несколько отдельных страниц в одном HTML файле

Есть ли способ иметь несколько отдельных HTML-страниц, содержащихся в одном файле HTML? Например, предположим, что у меня есть веб-сайт с двумя страницами:

Page 1 : click here for page 2

Page 2 : click here for page 1

Можно ли создать один HTML файл, который встраивает простой статический HTML для обеих страниц, но отображает только один за раз? Мои фактические страницы, конечно, сложнее с изображениями, таблицами и javascript для расширения строк таблицы. Я бы предпочел избежать слишком большого кода script. Спасибо!

Ответы

Ответ 1

Ну, вы могли бы, но вы, вероятно, просто хотите иметь два набора контента на одной странице и переключаться между ними. Пример:

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>

  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none">
    Content of page 2
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>

</body>
</html>

(Упрощенный код HTML, конечно, должен иметь doctype и т.д.)

Ответ 2

Вы считали iframes или разделяете свой контент и используете простое шоу/скрыть?

Изменить. Если вы хотите использовать iframe, вы можете иметь содержимое страницы1 и page2 в одном html файле. Затем вы можете решить, что показывать или скрывать, читая свойство location.search iframe. Таким образом, ваш код может быть таким:

Для страницы 1: iframe.src = "mypage.html?show=1"

Для страницы 2: iframe.src = "mypage.html?show=2"

Теперь, когда ваш iframe загружается, вы можете использовать location.search.split("=")[1], чтобы получить значение номера страницы и соответствующим образом показать содержимое. Это просто, чтобы показать, что iframes также можно использовать, но использование более сложное, чем обычное show/hide с использованием структур div.

Ответ 3

имеют все страницы в отдельных областях div

<div style="" id="page1">
First Page Contents
</div>

<div style="display:none" id="page2">
Second Page Contents
</div>

затем используйте js script для тренировки, которую вы просматриваете (например, в стиле хэштега) для навигации. Либо это, либо ajax, чтобы получить ответ от определенного файла (например, /pages/page1.html)

var $prehashval = "";
function loop()
{
    if (location.hash.slice(1)!=$prehashval)
        hashChanged();

    $prehashval = location.hash.slice(1);
    setTimeout("loop()", 100);
}
function hashChanged()
{
    var $output;
    switch (location.hash.slice(1))
    {
        case "page1":
            document.getElementById('page1').style.display = "";
            document.getElementById('page2').style.display = "none";
            break;
        case "page2":
            document.getElementById('page1').style.display = "none";
            document.getElementById('page2').style.display = "";
            break;
        default:
            $output = location.hash.slice(1);
    }
}
loop();

Ответ 4

JQuery Mobile имеет многостраничный. Но я не уверен в веб-приложениях для настольных компьютеров.

Ответ 5

Screen Rec

Вы можете использовать Colker, который создан для этого, но вам нужно будет удалить окно поиска и код функции поиска, потому что поиск несовместим с типом контента, который вы собираетесь использовать.

Содержимое страницы хранится в java-script array, а параметр URL page "(например:? page=pagename) определяет, какой контент страницы должен обслуживаться.

Ответ 6

Теоретически возможно использовать URI и фреймы схемы data:, но это довольно далеко от практического.

Вы можете подделать его, сокрыв некоторый контент с помощью JS, а затем показывая его, когда что-то щелкнули (в стиле tabtastic).

Ответ 7

Это своего рода переопределение одной страницы, но... Вы можете использовать iframes в HTML.

<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>

И page1.html будет вашей базовой страницей. Вы все еще делаете несколько страниц, но ваш браузер просто не двигается. Поэтому давайте скажем, что это ваш index.html. У вас есть вкладки, вы нажимаете страницу 2, ваш URL-адрес не изменится, но страница будет. Все в фреймах. Единственное отличие - это то, что вы также можете просмотреть источник кадра.

Ответ 8

Решение 1

Одним из решений для этого, не требуя какого-либо JavaScript, является просто создание одной страницы, на которой несколько страниц представляют собой просто обычный контент, разделенный большим количеством пробелов. Они могут быть обернуты в контейнеры div, а встроенная таблица стилей может наделить их пометкой:

<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...

<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
     alternative is to use this for the main part of the page also! -->
</div>

<div class="subpage">
</div>

<div class="subpage">
</div>

Вы получите картину. Каждая "страница" - это просто раздел, за которым следует огромное количество вертикального пространства, чтобы следующий не показывался.

Я использую этот трюк, чтобы добавить "ссылки на двунаправленную навигацию" в большой документ (более 430 страниц в формате PDF в виде букв), который я бы предпочел сохранить в виде одного файла .html. Я подчеркиваю, что это не веб-сайт, а документ.

Когда пользователь нажимает на гиперссылку ключевого слова в документе, для которой существует несколько возможных тем, связанных со словом, пользователь получает небольшое меню навигации, в котором представлены несколько вариантов тем. Это меню появляется поверх того, что выглядит как пустое окно браузера, и так эффективно выглядит как страница.

Единственное, что меню не является отдельной страницей, - это состояние вертикальной полосы прокрутки браузера, что в значительной степени не имеет значения в этом случае использования навигации. Если пользователь замечает это и начинает прокручиваться, открывается вся рутина, после чего пользователь будет улыбаться и ценить, что не требуется распаковывать файл .zip, заполненный маленькими страницами, и искать охоту за index.html.

Решение 2

Фактически возможно встроить HTML-страницу в HTML. Это можно сделать, используя несколько неясный URL data: в атрибуте href. В качестве простого теста попробуйте приклеить его где-нибудь на странице HTML:

<a href="data:text/html;charset=utf-8,<h3>FOO</h3>">blah</a>

В Firefox я получаю гиперссылку "бла", которая перемещается на страницу, показывающую заголовок FOO. (Обратите внимание, что у меня нет полностью сформированной HTML-страницы здесь, всего лишь фрагмент HTML, это просто пример приветствия).

Недостатком этого метода является то, что вся целевая страница находится в URL-адресе, который заполняется в поле ввода адреса браузера.

Если он большой, он может столкнуться с некоторыми проблемами, возможно, специфичными для браузера; У меня нет большого опыта в этом.

Другим недостатком является то, что весь HTML должен быть правильно экранирован, чтобы он мог отображаться как аргумент атрибута href. Очевидно, что он не может содержать простой символ двойной кавычки.

Третий недостаток заключается в том, что каждая такая ссылка должна реплицировать материал data:, поскольку она не является семантически ссылкой вообще, а встраивает вставки и вставки. Это не привлекательное решение, если вложенная страница будет большой, и к ней должно быть множество ссылок.

Ответ 9

Я использовал следующий трюк для той же проблемы. Хорошо, что он не требует никакого javascript.

CSS

.body {
     margin: 0em;
}

.page {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100vw;
    overflow-y: auto;
    z-index: 0;
    background-color: hsl(0,0%,100%);
}

  .page:target {
    left: 0vw;
    z-index: 1;
}

HTML:

<ul>
    <li>Click <a href="#one">here</a> for page 1</li>
    <li>Click <a href="#two">here</a> for page 2</li>
</ul>

<div class="page" id="one">
    Content of page 1 goes here.

    <ul>
        <li><a href="#">Back</a></li>
        <li><a href="#two">Page 2</a></li>
    </ul>
</div>

<div class="page" id="two">
    Content of page 2 goes here.

    <ul style="margin-bottom: 100vh;">
        <li><a href="#">Back</a></li>
        <li><a href="#one">Page 1</a></li>
    </ul>
</div>

См. JSFiddle.

Добавленное преимущество: по мере изменения URL-адреса вы можете использовать его для ссылки на определенные страницы. Это то, что метод не позволит вам сделать.

Надеюсь, это поможет!

Ответ 10

в дополнение к @binz-nakama, вот обновление его jsfiddle с очень небольшим количеством javascript. также внедряет эту очень хорошую статью о навигации CSS

обновление на jsfiddle

Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click", 
  function(e){
    Array.from(document.querySelectorAll("a"))
    .map(x => x.classList.remove("active"));
    e.target.classList.add("active");    
  }
));

Ответ 11

Допустим, у вас есть несколько страниц с идентификатором #page1 #page2 #page1 и #page3. #page1 - это идентификатор вашей стартовой страницы. Первое, что вы хотите сделать, это перенаправлять на стартовую страницу каждый раз, когда веб-страница загружается. Вы делаете это с помощью JavaScript:

document.location.hash = "#page1";

Затем следующая вещь, которую вы хотите сделать, - это поместить несколько ссылок в вашем документе на разные страницы, например:

<a href="#page2">Click here to get to page 2.</a>

Затем, наконец, вы хотите убедиться, что видна только активная страница или целевая страница, а все остальные страницы остаются скрытыми. Вы делаете это с помощью следующих объявлений в элементе <style>:

<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>