使用AJAX进行调用时不要更改URL

Question

我正在使用jQuery创建一个网站$.ajax,一旦我点击菜单图标,就会打开一个叠加层并根据链接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;
    }
});