从单个连续的 HTML 页面移动到“单独的页面”。使用CSS

发布于 2024-12-06 16:06:55 字数 728 浏览 0 评论 0原文

我有一个（有点长）单页网站，使用一些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 隐藏所有另一个

的还是有另一种更优雅的方法来实现这一点？

原文

I have a (somewhat long) single page website that uses some CSS (e.g. each content item is a div) I would like to move this to a "set of separate pages" which are navigable by means of a menu.

so instead of

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

I'd like to be able to navigate this so from the user-perspective, it appears to be

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

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

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

Should I just break up the page into separate pages, use jQuery to hide all the other <div>'s or is there another more elegant method of achieving this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执笏见 2024-12-13 16:06:55

这应该可以帮助您开始：

<!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>

This should get you started:

<!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>

回复收藏 0 原文

故事与诗 2024-12-13 16:06:55

很大程度上取决于上下文以及您实际呈现的内容，但如果您想要分解内容，有时选项卡式界面是一个可接受的解决方案。 jQuery UI 内置了一些Tab 功能，并且还有其他插件可以完成类似的功能。如果它是常见问题解答风格的界面，那么隐藏所有部分并在单击问题/标题时显示这些部分可能是有意义的，这可以通过 $("SOMETHING").toggle()$("SOMETHING").toggle() 在 jQuery.

回复收藏 0 原文

帅的被狗咬 2024-12-13 16:06:55

根据您想要达到的结果，有多种选择。

将长页面分成几页是标准方法。

另一种方法是使用一些 JavaScript 显示/隐藏这些部分。这将使页面看起来更好（例如更短）。

另一种方法是通过某种 AJAX 加载内容，这是两者的交叉。您将拥有单独的页面，然后通过 javascript 加载内容。这具有两者的好处，因为您的 AJAX 加载的内容将是页面之间的良好过渡，但您可以以搜索引擎将转到实际页面的方式对其进行编码。

另一种选择（取决于您的内容）是当今的趋势，是具有某种滚动视差背景。这是一个 http://unfold.no/ 的示例
这些网站需要 CSS3/javascript/设计知识才能创造出漂亮的东西。

回复收藏 0 原文

乖乖哒 2024-12-13 16:06:55

像这样的东西应该可以在 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();
});

Something like this should work in jQuery. I don't know of a way to get the same result with pure 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 原文

~没有更多了~