Hallo beste mensen,
Ik ben op dit moment bezig met een nieuwe site te maken. Door de jaren heen heb ik van alles bijgeleerd en dit keer kwam een menu met behulp van AJAX naar voren.
Hierdoor hoeft de pagina zich niet te refreshen. Ik had het menu werkend alleen ik liep tegen een groot probleem aan, namelijk de terug en vooruitknoppen van je browser.
Aangezien AJAX je URL niet veranderd werken deze knoppen niet naar behoren.
Ik heb al vanalles gelezen over HTML5 die hier een oplossing voor bied maar helaas kom ik er geen wijs uit (zo ver gevorderd ben ik helaas nog niet).
Maar allicht kunnen jullie mij hier verder mee helpen.
De codes zoals ik nu heb:
Hopelijk kunnen jullie mij iets verder helpen?
Alvast bedankt!
Ik ben op dit moment bezig met een nieuwe site te maken. Door de jaren heen heb ik van alles bijgeleerd en dit keer kwam een menu met behulp van AJAX naar voren.
Hierdoor hoeft de pagina zich niet te refreshen. Ik had het menu werkend alleen ik liep tegen een groot probleem aan, namelijk de terug en vooruitknoppen van je browser.
Aangezien AJAX je URL niet veranderd werken deze knoppen niet naar behoren.
Ik heb al vanalles gelezen over HTML5 die hier een oplossing voor bied maar helaas kom ik er geen wijs uit (zo ver gevorderd ben ik helaas nog niet).
Maar allicht kunnen jullie mij hier verder mee helpen.
De codes zoals ik nu heb:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<html>
<head>
<title> test </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-language" content="" />
<meta name="rating" content="general">
<meta name="distribution" content="global">
<script type="text/javascript">
$(function()
{
$("a[rel='tab']").click(function(e){
//e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'content'
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#content').html(data);
}});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
height();
}
//stop refreshing to the page given in
return false;
});
});
</script>
</head>
<body>
<div id="contentContainer">
<div id="navigation">
<nav>
<ul>
<li> <span> <a href="/" rel="tab" title="Homepage"> Home </a></span></li>
<li> <span> <a href="/overOns" rel="tab" title="Over_ons"> Over ons </a></span></li>
<li> <span> <a href="/collectie" rel="tab" title="Collectie"> Collectie </a></span></li>
<li> <span> <a href="/contact" rel="tab" title="Contact"> Contact </a></span></li>
</ul>
</nav>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adiiscing elit. Nullam orci purus, tincidunt venenatis accumsan interdum, viverra ac odio.
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>Hopelijk kunnen jullie mij iets verder helpen?
Alvast bedankt!
