ajax哈希导航无法正常工作

Question

我想在我的导航中使用哈希，但是无论我在网址中添加什么哈希，我的脚本都会在每次页面加载时将初始哈希重置为#home：

这里是一个脚本，用于测试哈希是否存在以及#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种方法中的1种来修复。我还删除了第一个不需要的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);

进行调试