ajax 哈希导航无法正常工作

Question

我想使用散列进行导航，但我的脚本会在每次页面加载时将初始散列重置为#home，无论我在 url 中添加什么散列：

这是测试散列是否存在以及在#content 中加载什么的脚本：

$page = $('#content');
if(window.location.hash == 'home') {        
    $xmlFile = 'xml/home.xml';
    $("#content").createHomeEntry();
} else if(window.location.hash == 'news') {
    $xmlFile = 'xml/news.xml';
    $("#content").createNewsEntry();
} else if (window.location.hash == 'biography'){
    $xmlFile = 'xml/bio.xml';
    $("#content").createBioEntry();
} else if (window.location.hash == 'awards'){
    $xmlFile = 'xml/awards.xml';
    $("#content").createBioEntry();
} else if (window.location.hash == 'discography'){
    $xmlFile = 'xml/discography.xml';
    $("#content").createBioEntry();
}else{
    alert('this should fire off because there is no hash but it doesnt');
    $xmlFile = 'xml/home.xml';
    $("#content").createHomeEntry();
}

somoeone 可以在这里帮助我，或者告诉我为什么这个脚本将 #home 设置为默认值。

Answer 1

window.location.hash 返回带有数字符号的散列。

这可以使用 4 种方法中的一种来解决。我还删除了第一个不需要的 if。

方法 #1（最佳）：从哈希属性中删除 #

$page = $('#content');
var hash = window.location.hash.substr(1);
if(hash == 'news') {
    $xmlFile = 'xml/news.xml';
    $("#content").createNewsEntry();
} else if (hash == 'biography'){
    $xmlFile = 'xml/bio.xml';
    $("#content").createBioEntry();
} else if (hash == 'awards'){
    $xmlFile = 'xml/awards.xml';
    $("#content").createBioEntry();
} else if (hash == 'discography'){
    $xmlFile = 'xml/discography.xml';
    $("#content").createBioEntry();
}else{
    alert('this should fire off because there is no hash but it doesnt');
    $xmlFile = 'xml/home.xml';
    $("#content").createHomeEntry();
}

方法#2（最有效）：使用开关和substr哈希

$page = $('#content');
switch (window.location.hash.substr(1)) {
    case 'news':
        $xmlFile = 'xml/news.xml';
        $("#content").createNewsEntry();
        break;
    case 'biography':
        $xmlFile = 'xml/bio.xml';
        $("#content").createBioEntry();
        break;
    case 'awards':
        $xmlFile = 'xml/awards.xml';
        $("#content").createBioEntry();
        break;
    case 'discography':
        $xmlFile = 'xml/discography.xml';
        $("#content").createBioEntry();
        break;
    default:
        alert('this should fire off because there is no hash but it doesnt');
        $xmlFile = 'xml/home.xml';
        $("#content").createHomeEntry();
        break;
}

方法#3（最简单）：添加哈希

$page = $('#content');
if(window.location.hash == '#news') {
    $xmlFile = 'xml/news.xml';
    $("#content").createNewsEntry();
} else if (window.location.hash == '#biography'){
    $xmlFile = 'xml/bio.xml';
    $("#content").createBioEntry();
} else if (window.location.hash == '#awards'){
    $xmlFile = 'xml/awards.xml';
    $("#content").createBioEntry();
} else if (window.location.hash == '#discography'){
    $xmlFile = 'xml/discography.xml';
    $("#content").createBioEntry();
}else{
    alert('this should fire off because there is no hash but it doesnt');
    $xmlFile = 'xml/home.xml';
    $("#content").createHomeEntry();
}

方法#4（最差）：使用indexOf

$page = $('#content');
    if(window.location.hash.indexOf('news') === 1) {
        $xmlFile = 'xml/news.xml';
        $("#content").createNewsEntry();
    } else if (window.location.hash.indexOf('biography') === 1){
        $xmlFile = 'xml/bio.xml';
        $("#content").createBioEntry();
    } else if (window.location.hash.indexOf('awards') === 1){
        $xmlFile = 'xml/awards.xml';
        $("#content").createBioEntry();
    } else if (window.location.hash.indexOf('discography') === 1){
        $xmlFile = 'xml/discography.xml';
        $("#content").createBioEntry();
    }else{
        alert('this should fire off because there is no hash but it doesnt');
        $xmlFile = 'xml/home.xml';
        $("#content").createHomeEntry();
    }

Answer 2

这里

window.location.hash == 'home'

它返回的不是“home”，而是返回#home。 Substr 您的哈希，或与 # 一起使用。 并且用于调试使用alert(window.location.hash);