我正在开发网站,使用 jquery $.ajax 加载 content/目录中不同页面的内容。我还使用主题标签来激活后退按钮、重新加载等。
但是。我的主菜单包含事件项目,如果我在一个主菜单项目的深度页面之间导航,则它是事件的。然后,我单击主菜单项之一,例如“联系人”。因此,联系人菜单项变为事件状态。如果我单击浏览器后退按钮,事件菜单项不会更改。那么,有什么方法可以记住事件主菜单项的状态吗?主菜单位于容器页面。
谢谢!
$(function(){
$('.menu a')
.bind('click',function(e) {
e.preventDefault();
$('#content').html('Извините, страница не существует или находится в разработке!');
$('.menu a').each(function() {$(this).removeClass('activelink');});
location.hash=$(this).attr('href').match(/(([a-z]*)\W)*/)[2];
$(this).addClass('activelink');
return false;
});
$('#content').on('click','a',function(e) {
if (!($(this).hasClass('address') || $(this).hasClass('zoom'))){
e.preventDefault();
$('#content').html('Извините, страница не существует или находится в разработке!');
location.hash=$(this).attr('href').match(/(([a-z]*)\W)*/)[2];
return false;
}
else {
if ($(this).hasClass('address')) {
alert('Вы покидаете сайт The House Of Events. Возвращайтесь к нам еще!');
}
}
});
function hashChange(){
var page=location.hash.slice(1);
if (page!=""){
$.ajax({
type: "GET",
url: "content/" + page + ".html #sub-content",
success: function(data, status) {
$('#content').html(data);
},
error: function fail() {
$('#content').html('Error');
}
});
}
}
if ("onhashchange" in window){
$(window).on('hashchange',hashChange).trigger('hashchange');
} else {
var lastHash='';
setInterval(function(){
if (lastHash!=location.hash)
hashChange();
lastHash=location.hash;
},100);
}
});
最佳答案
如果你坚持散列标签,你可以创造一个小技巧。
编辑这些:
$('#content').on('click','a',function(e) {
if(!($(this).hasClass('address') || $(this).hasClass('zoom'))){
e.preventDefault();
$('#content').html('Извините, страница не существует или находится в разработке!');
var page=location.hash.slice(1).split('/')[0] + '/' + $(this).attr('href').match(/(([a-z]*)\W)*/)[2];
location.hash=page;
return false;
} else {
if ($(this).hasClass('address')) {
alert('Вы покидаете сайт The House Of Events. Возвращайтесь к нам еще!');
}
}
});
function hashChange(){
var page=location.hash.slice(1).split('/')[1];
if(page==='undefined'){
page=location.hash.slice(1).split('/')[0];
}
if(page!=""){
$.ajax({
type: "GET",
url: "content/" + page + ".html #sub-content",
success: function(data, status) { $('#content').html(data); },
error: function fail() { $('#content').html('Error'); }
});
}
}
您还可以使用 HTML5 历史 API。
将其放在点击事件下(删除位置哈希)
var active=$('.menu a.active').attr('id'); // or var active=$('.menu a.active').text();
history.pushState({menu: active}, "Our events", "events.html");
然后要使用后退按钮更改内容,请使用 onpopstate
window.onpopstate = function(e){
if(e.state){
$('.menu a.activelink).removeClass('activelink')
$('.menu #'+JSON.stringify(e.state.menu).replace(/"/gi,'')).addClass('activelink');
var url=window.location.pathname;
$.ajax({ ... })
}
}
最后,如果您向菜单项添加大量类并使用 .hasClass()
检查它们,那么这一定是愚蠢的方法。
关于jquery - AJAX后退按钮菜单问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17003089/