Переход от одной непрерывной HTML-страницы к «отдельным страницам» с использованием CSS - PullRequest
Новая
       0

Переход от одной непрерывной HTML-страницы к «отдельным страницам» с использованием CSS

0 голосов
/ 26 сентября 2011

У меня есть (несколько длинный) одностраничный веб-сайт, который использует некоторый CSS (например, каждый элемент контента - это div). Я хотел бы переместить его в «набор отдельных страниц», по которым можно перемещаться с помощью меню.

так вместо 

<head>...</head>
<body>
  <div>stuff</div>
  <div>more stuff</div>
  <div>even more stuff</div>
</body>

Я бы хотел иметь возможность перемещаться по этому, так что с точки зрения пользователя, оно выглядит как 

<head>...</head>
<body>
  <div>stuff</div>
</body>

<head>...</head>
<body>
  <div>more stuff</div>
</body>

<head>...</head>
<body>
  <div>even more stuff</div>
</body>

Должен ли я просто разбить страницу на отдельные страницы, использовать jQuery, чтобы скрыть все другие <div> или есть другой более элегантный способ достижения этого?

Ответы [ 4 ]

1 голос
/ 26 сентября 2011

Это должно помочь вам начать: 

<!doctype html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
      $(function () {
        var menu = $("<ul>").prependTo($("body"))
        $("body > div").each(function () {
          var div = this
          var heading = $(this).find("h2").text()
          menu.append($("<li>").text(heading).click(function () {
            $("body > div").css({ display: "none" })
            $(div).css({ display: "block" })
            $("body > ul li").removeClass("current")
            $(this).addClass("current")
          }))
        })
        $("body > ul > :first-child").click()
      })
    </script>
    <style>
      body > ul li.current
      { font-weight: bold }
    </style>
  </head>
  <body>
    <div>
      <h2>Heading A</h2>
      <p>Content A</p>
    </div>
    <div>
      <h2>Heading B</h2>
      <p>Content B</p>
    </div>
    <div>
      <h2>Heading C</h2>
      <p>Content C</p>
    </div>
  </body>
</html>
1 голос
/ 26 сентября 2011

Многое будет зависеть от контекста и того, что вы на самом деле представляете, но если вы хотите разбить контент, иногда интерфейс с вкладками является приемлемым решением.jQuery UI имеет некоторые встроенные функции Tab , а также есть другие плагины для выполнения аналогичных функций.Если это интерфейс в стиле FAQ, то имеет смысл скрыть все разделы и показать разделы, когда они нажимают на вопрос / заголовок, что можно сделать с помощью $("SOMETHING").toggle() в jQuery.

0 голосов
/ 26 сентября 2011

Примерно так должно работать в jQuery.Я не знаю, как получить тот же результат с чистым CSS. 

$(document).ready(function() {
    // get the hash (the part after the '#') from the URL
    var hstr = window.location.hash.slice(1);
    if (hstr && $("#"+hstr).length)
        // 'hstr' is exactly the ID of the DIV you want to show
        $showme = $("#"+hstr);
    else
        // show the first DIV by default
        $showme = $("body > div").eq(0);
    $showme.show().siblings().hide();
});
0 голосов
/ 26 сентября 2011

В зависимости от результата, которого вы хотите достичь, есть несколько вариантов.

Стандартным методом является разделение длинной страницы на несколько страниц.

Другой способ - показать / скрыть разделы с помощью некоторого JavaScript. Это сделает страницу более привлекательной (например, менее длинной).

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

Другой вариант (в зависимости от вашего контента), который сегодня является тенденцией, заключается в том, чтобы иметь какую-то прокручивающуюся фон Parallax. это пример одного http://unfold.no/ Эти веб-сайты требуют знания CSS3 / javascript / design, чтобы создать что-то приятное.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...