hash返回未定义，脚本将不会显示正确的页面

Question

我使用这个脚本来修改我的页面

(function (w, d) {
    var allElements = document.getElementsByTagName("*");
    var allIds = [];
    for (var i = 0, n = allElements.length; i < n; ++i) {
        var el = allElements[i];
        if (el.id) {
            allIds.push(el.id);
        }
    }
    oldHash = window.location.hash;
    window.onhashchange = function () {
        if (oldHash === window.location.hash)
            return;
        allIds.forEach(function (id) {
            id = "#" + id;
            if (id === window.location.hash) {
                $(".content div:not(.hidden)").fadeOut(400, function() {
                    $(".content div:not(.hidden)").addClass("hidden");
                    $(id).fadeIn(400, function () {
                        $(id).removeClass("hidden");
                    });
                });
            }
        });
        oldHash = window.location.hash;
    };
}(this, this.document));

它应该改变我的页面，以便当我单击导航栏中的链接时，调用此脚本并改变页面以显示导航栏按钮ID下的任何内容。当我点击导航栏上的"home"按钮时，我的页面应该会变成www.foo.com/#home。

实际上，页面甚至不会将其哈希值更改为www.foo.com/#home。无论我点击哪个按钮，页面都会保持www.foo.com。我镜像从github网站。输入输出地址。

    <nav id="navbar" class="fixedElement navbar navbar-inverse navbar-fixed-top navbar-custom">
        <div class="container">
            <div  class="cats nav collapse navbar-collapse">
                <ul id="navbar-ul" class="nav navbar-nav">
                    <li><a href="#home" id="home-nav"  >home</a></li>
                    <li><a href="#about" id="about-nav"  >about</a></li>
                    <li><a href="#speakers" id="speakers-nav"  >speakers</a></li>
                    <li><a href="#team" id="team-nav"  >team</a></li>
                    <li><a href="#tickets" id="tickets-nav"  >tickets</a></li>
                    <li><a href="#sponsors" id="sponsors-nav" >sponsors</a></li>
                    <li><a href="#contact" id="contact-nav"  >contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <div id='home'  class="hidden" >
    </div>

如果我在Chrome中打开开发工具并在控制台输入"console.log(window.location.hash)"，控制台返回未定义。这意味着哈希值根本没有改变。

1. 为什么?镜像网页是否存在一些固有的问题，不允许他们更改散列?
2. 我如何修改这使我的页面链接到适当的目标?

如果我显示了什么错误，请让我知道，以便我可以做出调整。谢谢你！

Answer 1

你的脚本应该是:

， window替换为w, document替换为d

(function (w, d) {
    var allElements = d.getElementsByTagName("*");
    var allIds = [];
    for (var i = 0, n = allElements.length; i < n; ++i) {
        var el = allElements[i];
        if (el.id) {
            allIds.push(el.id);
        }
    }
    oldHash = w.location.hash;
    w.onhashchange = function () {
        if (oldHash === w.location.hash)
            return;
        allIds.forEach(function (id) {
            id = "#" + id;
            if (id === w.location.hash) {
                $(".content div:not(.hidden)").fadeOut(400, function() {
                    $(".content div:not(.hidden)").addClass("hidden");
                    $(id).fadeIn(400, function () {
                        $(id).removeClass("hidden");
                    });
                });
            }
        });
        oldHash = w.location.hash;
    };
}(this, this.document));