0

我将此代码用于我的主站点导航，它通过 ajax 加载每个页面并具有后备功能。

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap");
    $("nav").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $contentWrap.load(newHash + " #content");
    });
    $(window).trigger('hashchange');
});​

这很好，但是当我从另一个页面加载内容时，例如 about.html，我还加载了更多按钮以在#content-wrap 中进行导航。

所以#content-wrap 现在包含一个数据框和一些用于导航的按钮。当我单击新导航时，它需要在数据框中加载新数据。

首先，我尝试复制上面的脚本，但使用新的锚点，但是我遇到了冲突。

我想我需要某种 if 语句，我已经研究过 if (function !== undefined) 之类的东西，但不知道该怎么做。

我不确定我对自己的解释有多好，我很困惑解释它，但基本上我想将上面的代码与下面的基本相同的代码结合起来而不会发生冲突。

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap"),
        $aboutWrap = $("#a-wrap");
    $("#content-wrap").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $aboutWrap.load(newHash + " #a-content");
    });
    $(window).trigger('hashchange');
});​

更新：有点工作，但改变了我的计划

$(function() {

var newHash = '',
        $nav = $("nav a"),
        $boxBtn = '',
        $aboutWrap = '',
        $contentWrap = $("#content-wrap");

$("nav").on("click", "a", function() {

    $(this).addClass("nav-click");

    window.location.hash = $(this).attr("href");

    return false;
});

$contentWrap.on("click", "a", function() {

    $(this).addClass("btn-click");

    window.location.hash = $(this).attr("href");

    return false;
});

$(window).on('hashchange', function() {

    var     $aboutWrap = $("#a-wrap"),
                $boxBtn = $("div.btn a");

    newHash = window.location.hash.substring(1);


    if ($nav.hasClass("nav-click")){

    $contentWrap.load(newHash + " #content");
    $nav.removeClass("nav-click");
    };

    if ($boxBtn.hasClass("btn-click")){

        $aboutWrap.load(newHash + " #a-content");
        $boxBtn.removeClass("btn-click");
    };
});

$(window).trigger('hashchange');


}); /*/end*/
4

1 回答 1

0

我遇到了类似的问题，基本上在大多数情况下，问题在于元素 ID 冲突。在 DOM 中，您只能使用一次 ID。您可以通过仅对包装器等唯一元素使用类名和 ID 来解决此问题。

于 2012-04-18T19:04:42.413 回答