Onepager mit jQuery

jQuery-Script um auf kleinen Webseiten (Web-Visitenkarten bzw. Onepager) zu navigieren. Inhalte werden ein- und ausgeblendet, ähnlich Accordion-Scripts. Einzelne Inhalte können aber auch über den Hash-Verweis direkt angesprungen werden, z.B. unckel.com/#kontakt.
Ist kein JavaScript verfügbar, werden alle Inhalte untereinander dargestellt. Über die Navigation können diese angesprungen werden.

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
	
  var navLinks = $('#nav a');	
  var pages = $('#pages > div');
	
  // rewrite ids to set hashes into address bar and hide all pages
  pages.each(function(i) {
    $(this).attr('id','js' + $(this).attr('id'));
  }).hide();
  $('.toplink').hide();
    
  navLinks.click(function(e) {
    // highlight navigation links
    navLinks.removeClass('active');
    $(this).addClass('active');

    // hide all pages and show requested page
    pages.hide();
    var page = $(this).attr('href').substring(1);
    $('#js' + page).fadeIn(); // .slideDown();
  });
	
  // read hash from address bar to show requested page
  var locationHash = window.location.hash.substring(1);
  if (locationHash == '') $('#nav a:first').click();
  else $('#nav a[href=#' + locationHash + ']').click();
	
});
</script>

Styles

<style>
  #pages div { background-color:#ddd; height:500px; }
  .active { font-weight:bold; color:#f00; }
</style>

HTML

<ul id="nav">
  <li><a href="#page1">Page 1</a></li>
  <li><a href="#page2">Page 2</a></li>
  <li><a href="#page3">Page 3</a></li>
</ul>

<div id="pages">
  <div id="page1">Page 1<p class="toplink"><a href="#nav">Nach oben</a></p></div>
  <div id="page2">Page 2<p class="toplink"><a href="#nav">Nach oben</a></p></div>
  <div id="page3">Page 3<p class="toplink"><a href="#nav">Nach oben</a></p></div>
</div>