Question

我正在使用此代码进行主站点导航，该站点导航通过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*/

Answer 1

我有一个类似的问题，基本上在大多数情况下，问题是与元素ID冲突。在DOM中，您只能使用一次ID。您可以通过使用classNames和ID来解决这个问题，只使用包装器等唯一元素。

ajax导航中的jquery ajax导航

1 个答案: