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下的任何内容。当我点击导航栏的“主页”按钮时，我的页面应该更改为www.foo.com/#home。

在实践中，该页面甚至不会改变它的散列到www.foo.com/#home。无论我点击哪个按钮页面都将保留为www.foo.com。我正在从github.io地址镜像该网站。

    <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中打开Dev Tools并在控制台中输入“console.log（window.location.hash）”，则控制台将返回undefined。这意味着哈希根本不会改变。

这是为什么？镜像网页是否存在一些固有的问题，不允许它们改变它们的哈希值？
如何修改此设置以使我的网页链接到正确的目标？

如果我显示错误，请告诉我，以便我可以进行调整。谢谢！

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));

window.location.hash返回undefined，脚本不会显示正确的页面

1 个答案: