这是应该使用 jQuery 做你想做的事情:
(function($){
var history;
function getHistory() {
var tmp = $.cookie("history");
if (tmp===undefined || tmp===null) tmp = "";
if ($.trim(tmp)=="") tmp = [];
else tmp = tmp.split("||");
history = [];
$.each(tmp, function(){
var split = this.split("|");
history.push({
title: split[0],
url: split[1]
});
});
}
function saveHistory() {
var tmp = [];
$.each(history, function(){
tmp.push(this.title+"|"+this.url);
});
$.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
}
function addToHistory(title,url) {
var newHistory = []
$.each(history, function(){
if (this.url!=url) newHistory.push(this);
});
history = newHistory;
if (history.length>=10) {
history.shift();
}
history.push({
title: title,
url: url
});
saveHistory();
writeHistory();
}
function writeHistory() {
var list = $("<ul />");
$.each(history, function() {
var element = $("<li />");
var link = $("<a />");
link.attr("href",this.url);
link.text(this.title);
element.append(link);
list.append(element);
});
$("#history").empty().append(list);
}
$(document).ready(function(){
getHistory();
var url = document.location.href;
var split = url.split("#");
var title;
if (split.length > 1) {
title = $("#"+split[1]).text();
} else {
title = document.title;
}
if (title===undefined || title===null || $.trim(title)=="") title = url;
addToHistory(title,url);
url = split[0];
$("a[href^='#']").click(function(){
var link = $(this);
var href = link.attr("href");
var linkUrl = url+href;
var title = $(href).text();
if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
addToHistory(title,linkUrl);
});
});
})(jQuery);
放入一个包含在所有页面中的 js 文件。您还需要在它之前包含 jquery.cookie.js ( http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ )
您的页面必须采用以下两个测试页面的格式:
[历史.html]
<html>
<头部>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>我的第一页</title>
</head>
<正文>
<h2>第一页</h2>
<h3>历史</h3>
<div id="历史"></div>
<h3>链接</h3>
<a href="#part1">第 1 页 - 第 1 部分</a>
<a href="#part2">第 1 页 - 第 2 部分</a>
<a href="history2.html#part1">第 2 页 - 第 1 部分</a>
<a href="history2.html#part2">第 2 页 - 第 2 部分</a>
<h3>零件</h3>
<h4 id="part1">首页第一部分</h4>
<h4 id="part2">首页第二部分</h4>
</正文>
</html>
[历史2.html]
<html>
<头部>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>我的第二页</title>
</head>
<正文>
<h2>第二页</h2>
<h3>历史</h3>
<div id="历史"></div>
<h3>链接</h3>
<a href="#part1">第 2 页 - 第 1 部分</a>
<a href="#part2">第 2 页 - 第 2 部分</a>
<a href="history.html#part1">第 1 页 - 第 1 部分</a>
<a href="history.html#part2">第 1 页 - 第 2 部分</a>
<h3>零件</h3>
<h4 id="part1">第二页第一部分</h4>
<h4 id="part2">第二页第二部分</h4>
</正文>
</html>
请注意,用于历史记录块的标题是链接所针对的标记的文本,如果它是 #something href 或页面的标题,如果不是。
任何对 jQuery 有一定了解的编码人员都可以根据您的特定需求对其进行调整。