2
我最近开始重新设计/改造一个网站，使用帧/框架集（我相信这是在20世纪90年代创建了！）网站结构已经失去了浏览器的后退能力
我都选择提出了一个基本结构如下：
<body>
header & navigation
content
footer
</bod>
如果上面是在我的index.html页面定义页眉/导航和页脚是静态的..根据从导航菜单选择的项目内容的变化。
我现在唯一的问题是，例如，用户在主页上（index.html），然后从导航菜单中选择和项目，刷新...如果用户单击后退按钮在任何浏览器上，他们都不会回到主页，而是回到以前的浏览器位置，比如他们来自谷歌搜索，他们会被重定向到那里。
的Index.html：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<script type="text/javascript" src="javascript/carousel_js.js"></script>
<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(300);
},
function() {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript">
function getPageContent(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
$('#welcome').hide();
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<style>
/*nav {background:#FFF;float:left;}*/
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="">
<div class="wrap">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59" alt="Tables and Chairs"></h1>
<h2 class="heading">Welcome to Tables and Chairs</h2>
</hgroup>
</div>
</tr>
</table>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources"><a href="#" title="">Date <span class="icon-caret-down"></span> </a>
<li>
<a onClick="getPageContent('Information.html')">Information</a>
<ul class="fallback">
<li><a onClick="getPageContent('ovens.html')">Ovens</a></li>
<li><a onClick="getPageContent('fridges.html')">Fridges</a></li>
<li><a onClick="getPageContent('tables.html')">Tables</a></li>
<li><a onClick="getPageContent('costing.html')">Costing</a></li>
<li><a onClick="getPageContent('install.html')">Installation</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('legal.html')">Legal Info</a>
<ul class="fallback">
<li><a onClick="getPageContent('terms.html')">Terms & Conditions</a></li>
<li><a onClick="getPageContent('data.html')">Data Protection</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('contact.html')">Contact Us</a>
<ul class="fallback">
<li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
<li><a onClick="getPageContent('comments.html')">Your Comments</a></li>
<li><a onClick="getPageContent('addinfos.html')">Additional Info</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('cookies.html')">Cookies</a>
</li>
</li>
</ul>
</nav>
<!-- MENU END -->
<div id="PageContent">
<section id="welcome">
<div class="page-heading">
<h1 class="wrap">Welcome to Tables and Chairs</h1>
</div>
<div class="ctr-full">
<form class="wrap createsrc" method="post">
<div class="grid one-whole">
<section class="box">
<fieldset>
<ul id="carousel">
<li><img width="200" height="133" src="images/slideImage1.png" /></li>
<li><img width="200" height="133" src="images/slideImage2.png" /></li>
<li><img width="200" height="133" src="images/slideImage3.png" /></li>
<li><img width="200" height="133" src="images/slideImage4.png" /></li>
</ul>
</fieldset>
</section>
</div>
<br>
</form>
</div>
</section>
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small class="fr">© 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->
</body>
</html>
任何帮助表示赞赏。
感谢
更新**
感谢您的反馈家伙。我试图实施Ben Almans插件。
我已经下载了完整的插件，并放置在下面的代码在我的脑海：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<script type="text/javascript" src="javascript/jquery.ba-hashchange.js"></script>
<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(300);
},
function() {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<!-- New JavaScript functions to enable history navigation -->
<script type="text/javascript">
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange(function(){
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + (hash.replace(/^#/, '') || 'blank') + '.';
// Iterate over all nav links, setting the "selected" class as-appropriate.
$('#nav li').each(function(){
var that = $(this);
that[ that.attr('href') === hash ? 'addClass' : 'removeClass' ]('selected');
});
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
</script>
<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript">
function getPageContent(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
$('#welcome').hide();
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<style>
/*as per earlier post....*/
</style>
</head>
<body>
的#tag犯规显示为Firbug我看到的错误工作：
类型错误： $ .browser未定义。
任何帮助表示赞赏。
不看我猜你需要一个jQuery历史插件 – mplungjan
这是预期的行为。您没有导航到其他页面，您正在使用ajax加载它们。所以实际上你的主页永远不会被浏览出来。因此，后面会带你到你从哪里来。 – Abhitalks
您可以使用散列表 –