使用AJAX通话时请勿更改URL

Question

我使用jQuery $.ajax创建一个网站，单击菜单图标后，将打开一个覆盖图，并根据link href属性显示请求的内容。 当我这样做时，网站的URL更改为您单击的任何链接。 例如，如果您单击“关于”，则URL为http://example.com/#about 。

我不希望这样，因为当您关闭重叠式广告时，该网站保持为http://example.com/#about ，并且如果您以这种方式进入该网站，则不会打开“关于”页面，甚至连重叠式广告都不会打开将打开。 我想知道URL是否有一种不会改变的方式，并且始终为http://example.com 。

这是我当前的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;
    }
});

Answer 1

移动event.preventDefault(); 在else块之外。

另外，删除document.location.hash = $linkClicked; 线。

$(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;
    }
});

Answer 2

document.location.hash = $linkClicked; 该preventDefault()您的网址更改也可以使用preventDefault()来阻止链接点击更改页面的网址

Answer 3

使用e.preventDefault(); 删除所有哈希更改代码

$('.w-container .w-nav-menu a').click(function(e) {
e.preventDefault();