使用Ajax的jQuery前进/后退功能 [英] JQuery Back/Forward Functionality with Ajax
问题描述
我一直在使用JQuery对网站进行编码，以将不同的.html文件加载到页面上的内容div中.当然，这意味着后退和前进按钮对在站点内进行导航没有多大作用.我进行了一些研究，发现了很多类似历史的选项，甚至找到了
I've been coding a site using JQuery to load different .html files into a content div on the page. Of course this means that the back and forward buttons don't do much to navigate within the site. I've done some research, and found a bunch of options like history, and even found this Stack Overflow question regarding my issue. Unfortunately I've spent two days now banging my head against my keyboard trying to get one of these jquery plugins to work. Can someone help me to implement one of these back/forward enabling plugins into my site? Your help would be huuuugely appreciated.
提前谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toward Maximum Independence</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="pagesstyle.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
<ul id="nav">
<li>
<a href="#">DONATE </a>
<ul>
<li><a href="#" id="donationform">Donation Form</a></li>
<li><a href="#" id="donateyourcar">Donate Your Car</a></li>
</ul>
</li>
<li><a href="#">GET INVOLVED</a>
<ul>
<li><a href="#" id="referaconsumer">Refer a Consumer</a></li>
<li><a href="#" id="upcomingevents">Upcoming Events</a></li>
<li><a href="#" id="prospectiveemployers">Prospective Employers</a></li>
<li><a href="#" id="takepoliticalaction">Take Political Action</a></li>
</ul>
</li>
<li><a href="#">OUR PROGRAMS</a>
<ul>
<li><a href="#" id="jobplacement">Job Placement</a></li>
<li><a href="#" id="fostercare">Foster Care</a></li>
<li><a href="#" id="independentliving">Independent Living</a></li>
<li><a href="#" id="projectconnect">Project Connect</a></li>
</ul>
</li>
<li><a href="#">WHO WE ARE</a>
<ul>
<li><a href="#" id="missionstatement">Mission Statement</a></li>
<li><a href="#" id="history">History</a></li>
<li><a href="#" id="boardofdirectors">Board of Directors</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="text">
<!--Content goes here -->
</div>
</div>
<div id="footer">
</div>
</body>
和我的javascript:
and my javascript:
jQuery.event.add(window, "load", initialize);
jQuery.event.add(window, "resize", initialize);
function initialize()
{
$('#header').css({'visibility':'visible'});
var h = $(window).height();
var w = $(window).width();
$('#header').css({'width': w, 'height': w*.190});
$('#nav a').bind("click", selectThis);
$('#leftcolumn a').bind("click", selectThis);
}
function selectThis()
{
var url='text/' + $(this).attr('id') + '.html';
$('#text').load(url);
}
似乎不应该那么难，但是我想我只是不明白它应该如何工作.我的内容div称为"#text"，标头中的所有链接将内容引入其中.我已经尝试过jquery.history和jquery.address两者，并且无法使它们正常工作.再次感谢您的任何建议或帮助，我真的希望有人可以帮助我.
It seems like it shouldn't be that hard, but I guess I just don't understand how it's supposed to work. My content div is called "#text", and all the links in the header pipe content into it. I've tried jquery.history, and jquery.address both extensively, and couldn't get them to work. Thanks again in advance for any advice or help, I really hope someone can help me out.
推荐答案
最简单的方法是使用内置的浏览器机制，即更改显示的URL.如果通过在URL的末尾添加井号来完成此操作，则不会执行导航.关键步骤是
the easiest way is to use in-built browser mechanisms, i.e. change the URL displayed. If you do this by adding a hash-tag to the end of the URL, no navigation will be performed. The key steps are
- 更改您的"selectThis"功能以更改哈希，但不再执行
- 添加一个每100毫秒运行一次的函数，如果哈希值已更改，则对div进行ajax.
您可以使用以下方法做到这一点:
You can do it with something like this:
function selectThis()
{
window.location.hash = $(this).attr('id');
}
var lastUrl; // adding a global variable for short code, ideally you'd find a way to avoid this.
$(
window.setInterval(function() {
var url='text/' + window.location.hash + '.html'; // possibly you have to remove the first character of the hash to make this work...
if (lastUrl != url) {
lastUrl = url;
$('#text').load(url);
}
}, 100);
); // wrapping this function in the jQuery selector delays setting up the timeout until the page has loaded.
当您在浏览器中向后/向前单击时，哈希值将发生变化，并且页面将以适当的内容进行ajax.
as you click backward/forward in your browser, the hash will change, and your page will ajax in the appropriate content.
这篇关于使用Ajax的jQuery前进/后退功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
