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>