Move from a single continuous HTML page to "separate pages" using CSS
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?
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>
A lot will depend on the context and what it is you're actually presenting, but if you're looking to break up the content, sometimes a tabbed interface is an acceptable solution. jQuery UI has some Tab functionality built in, and there are other plug-ins to accomplish similar functionality. If it's an FAQ style interface, then it may make sense to hide all the sections and show the sections when they click on the question/title, which can be accomplished with $("SOMETHING").toggle() in jQuery.
There are several options depending on the result that you want to achieve.
Separating a long page into several pages is your standard method.
Another method is to show/hide the sections with some javascript. This will make the page look nicer (e.g. less long).
Another method would be to load in the content via some AJAX, which is a cross between the two. You would have your separate pages, then load the content in through javascript. This has the benefit of both, in that your AJAX loaded content will be a nice transition between pages, but you can code it in a way that search engines will go to the actual page.
Another option (depending on your content), which is a trend these days, is to have some sort of scrolling Parallax background. this is an example of one http://unfold.no/ These websites require knowledge of CSS3/javascript/design in order to create something nice.
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();
});
加载中,请稍侯......
精彩评论