jQuery hashchange 函数不起作用答案

【问题标题】：jQuery hashchange function not workingjQuery hashchange 函数不起作用
【发布时间】：2013-02-17 15:11:21
【问题描述】：

我无法让 jQuery hashchange 函数工作，这不是我以前用过的东西，我不知道为什么它也不能按我想要的那样工作。
我有一个包含 6 个部分的“关于”页面，每个部分都通过子菜单显示/隐藏，因此一次只显示一个部分。但是我想将哈希附加到这些页面上，以便可以从其他页面链接到它们。这是我的代码，我将解释我遇到的问题：

jQuery：

$(document).ready(function(){
$('.about').hide();
$('#section01').show();

$(function(){
$(window).on('hashchange', function(){
        var hash = window.location.hash;
     $('.sub-menu').each(function(){
           $('.about').hide();
           $('#section'+$(this).attr('hook')).fadeIn();
           return false;
    });  

});
});
$(window).hashchange();
});

HTML：

<div id="content-wrap"> 


    <div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">SECTION01</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">SECTION02</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">SECTION03</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">SECTION04</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">SECTION05</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">SECTION06</a></li>
    </div>


        <div id="section01" class="about">
CONTENT GOES HERE
        </div>

        <div id="section02" class="about">
CONTENT GOES HERE
        </div>

        <div id="section03" class="about">
CONTENT GOES HERE
        </div>              

        <div id="section04" class="about">
CONTENT GOES HERE
        </div>

        <div id="section05" class="about">
CONTENT GOES HERE
        </div>

        <div id="section06" class="about">
CONTENT GOES HERE
        </div>

</div>

所以点击.sub-menu 成功添加了哈希#about01 #about02 等。但是相关部分并没有淡入，而是一直淡入#section01，我不明白为什么。
在我介绍 hashchange 之前，我的这个函数工作得很好，但现在相关部分没有显示，只是总是#section01，不管你点击哪个.sub-menu。

【问题讨论】：

你确定hashchange回调被触发了吗？
@ExplosionPills 我想是这样，哈希值被添加到 url，但相关部分正在淡入。
在回调函数中放一个console.log/alert，看看是否被调用
@ExplosionPills 嗯，也许不是，我以前从未使用过 hashchanges，所以我对它们有点陌生。虽然正在添加哈希，但只需单击子菜单项即可在#section01 中淡出。

标签： jquery html menu fadein hashchange

【解决方案1】：

我不会使用.attr hook，而是使用data-hook 和.data。这不是问题。

您从未真正比较过“钩子”值是否与哈希值匹配。

if ($(this).attr('hook') === hash.replace('#about', '')) {

如果哈希为空（我想），您还需要显示第一部分，但我相信您可以弄清楚。

http://jsfiddle.net/wkHj2/

【讨论】：