{"id":137,"date":"2011-01-06T01:08:20","date_gmt":"2011-01-06T00:08:20","guid":{"rendered":"http:\/\/unckel.com\/blog\/?p=137"},"modified":"2019-12-07T22:02:47","modified_gmt":"2019-12-07T21:02:47","slug":"onepager-mit-jquery","status":"publish","type":"post","link":"https:\/\/unckel.de\/blog\/onepager-mit-jquery\/","title":{"rendered":"Onepager mit jQuery"},"content":{"rendered":"

jQuery-Script um auf kleinen Webseiten (Web-Visitenkarten bzw. Onepager) zu navigieren. Inhalte werden ein- und ausgeblendet, \u00e4hnlich Accordion-Scripts. Einzelne Inhalte k\u00f6nnen aber auch \u00fcber den Hash-Verweis direkt angesprungen werden, z.B. unckel.com\/#kontakt.
\nIst kein JavaScript verf\u00fcgbar, werden alle Inhalte untereinander dargestellt. \u00dcber die Navigation k\u00f6nnen diese angesprungen werden.<\/p>\n

JavaScript<\/strong><\/p>\n

<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.4\/jquery.min.js\"><\/script>\n<script>\n$(function() {\n\t\n  var navLinks = $('#nav a');\t\n  var pages = $('#pages > div');\n\t\n  \/\/ rewrite ids to set hashes into address bar and hide all pages\n  pages.each(function(i) {\n    $(this).attr('id','js' + $(this).attr('id'));\n  }).hide();\n  $('.toplink').hide();\n    \n  navLinks.click(function(e) {\n    \/\/ highlight navigation links\n    navLinks.removeClass('active');\n    $(this).addClass('active');\n\n    \/\/ hide all pages and show requested page\n    pages.hide();\n    var page = $(this).attr('href').substring(1);\n    $('#js' + page).fadeIn(); \/\/ .slideDown();\n  });\n\t\n  \/\/ read hash from address bar to show requested page\n  var locationHash = window.location.hash.substring(1);\n  if (locationHash == '') $('#nav a:first').click();\n  else $('#nav a[href=#' + locationHash + ']').click();\n\t\n});\n<\/script><\/pre>\n
Styles<\/strong><\/p>\n
<style>\n  #pages div { background-color:#ddd; height:500px; }\n  .active { font-weight:bold; color:#f00; }\n<\/style><\/pre>\n
HTML<\/strong><\/p>\n
<ul id=\"nav\">\n  <li><a href=\"#page1\">Page 1<\/a><\/li>\n  <li><a href=\"#page2\">Page 2<\/a><\/li>\n  <li><a href=\"#page3\">Page 3<\/a><\/li>\n<\/ul>\n\n<div id=\"pages\">\n  <div id=\"page1\">Page 1<p class=\"toplink\"><a href=\"#nav\">Nach oben<\/a><\/p><\/div>\n  <div id=\"page2\">Page 2<p class=\"toplink\"><a href=\"#nav\">Nach oben<\/a><\/p><\/div>\n  <div id=\"page3\">Page 3<p class=\"toplink\"><a href=\"#nav\">Nach oben<\/a><\/p><\/div>\n<\/div><\/pre>\n","protected":false},"excerpt":{"rendered":"
jQuery-Script um auf kleinen Webseiten (Web-Visitenkarten bzw. Onepager) zu navigieren. Inhalte werden ein- und ausgeblendet, \u00e4hnlich Accordion-Scripts. Einzelne Inhalte k\u00f6nnen aber auch \u00fcber den Hash-Verweis direkt angesprungen werden, z.B. unckel.com\/#kontakt. Ist kein JavaScript verf\u00fcgbar, werden alle Inhalte untereinander dargestellt. \u00dcber die Navigation k\u00f6nnen diese angesprungen werden. JavaScript <script src=“http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.4\/jquery.min.js“><\/script> <script> $(function() { var navLinks = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-137","post","type-post","status-publish","format-standard","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":1,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":781,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions\/781"}],"wp:attachment":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}