[英]Do not change URL when doing a call with AJAX
I'm creating a website using jQuery $.ajax
, once I click a menu icon, an overlay opens and show the requested content based on the link href
attribute. 我使用jQuery $.ajax
创建一个网站,单击菜单图标后,将打开一个覆盖图,并根据link href
属性显示请求的内容。 When I do this, the URL of the site changes to whatever link you click. 当我这样做时,网站的URL更改为您单击的任何链接。 For example, if you click "about" the URL would be http://example.com/#about
. 例如,如果您单击“关于”,则URL为http://example.com/#about
。
I don't want this, because when you close the overlay, the site stays like http://example.com/#about
, and if you enter the site that way, the about page won't open, not even the overlay will open. 我不希望这样,因为当您关闭重叠式广告时,该网站保持为http://example.com/#about
,并且如果您以这种方式进入该网站,则不会打开“关于”页面,甚至连重叠式广告都不会打开将打开。 I'm wondering if there's a way the URL doesn't change and is always http://example.com
. 我想知道URL是否有一种不会改变的方式,并且始终为http://example.com
。
Here's my current jQuery code: 这是我当前的jQuery代码:
$(function() {
$('.w-container .w-nav-menu a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $pageRoot = $linkClicked.replace('#', '');
if (!$(this).hasClass("active")) {
$(".w-container .w-nav-menu a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if((msg))
{
$('.content').html(msg);
$('.content').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'products' :
$("#" + hash + "-link").trigger("click");
break;
case 'about' :
$("#" + hash + "-link").trigger("click");
break;
case 'storelocator' :
$("#" + hash + "-link").trigger("click");
break;
case 'media' :
$("#" + hash + "-link").trigger("click");
break;
case 'faq' :
$("#" + hash + "-link").trigger("click");
break;
case 'contact' :
$("#" + hash + "-link").trigger("click");
break;
}
});
Move event.preventDefault();
移动event.preventDefault();
outside the else
block. 在else
块之外。
Also, remove the document.location.hash = $linkClicked;
另外,删除document.location.hash = $linkClicked;
line. 线。
$(function() {
$('.w-container .w-nav-menu a').click(function() {
var $linkClicked = $(this).attr('href');
var $pageRoot = $linkClicked.replace('#', '');
if (!$(this).hasClass("active")) {
$(".w-container .w-nav-menu a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if((msg))
{
$('.content').html(msg);
$('.content').hide().fadeIn();
}
}
});
}
event.preventDefault();
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'products' :
$("#" + hash + "-link").trigger("click");
break;
case 'about' :
$("#" + hash + "-link").trigger("click");
break;
case 'storelocator' :
$("#" + hash + "-link").trigger("click");
break;
case 'media' :
$("#" + hash + "-link").trigger("click");
break;
case 'faq' :
$("#" + hash + "-link").trigger("click");
break;
case 'contact' :
$("#" + hash + "-link").trigger("click");
break;
}
});
document.location.hash = $linkClicked;
that line makes your url change also use preventDefault()
to stop the link click from changing the url of the page 该preventDefault()
您的网址更改也可以使用preventDefault()
来阻止链接点击更改页面的网址
Use e.preventDefault();
使用e.preventDefault();
remove all hash alteration code 删除所有哈希更改代码
$('.w-container .w-nav-menu a').click(function(e) {
e.preventDefault();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.