Home/ Questions/Q 6613041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:10:15+00:00

I have a (somewhat long) single page website that uses some CSS (e.g. each

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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