Question

我正在使用jQuery $.ajax创建网站，点击菜单图标后，会打开一个叠加层，并根据链接href属性显示所请求的内容。当我这样做时，网站的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

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

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

Answer 3

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

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

3 个答案: