在 Ajax 导航中查询 Ajax 导航

jquery ajax navigation within ajax navigation

本文关键字：Ajax 导航 查询      更新时间：2023-09-26

我正在将此代码用于我的主站点导航，该导航通过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');
});​

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

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

首先，我

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

我想我需要某种 if 语句，我已经研究了类似 if（函数 ！== 未定义）的东西，但不知道该怎么做。

我

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

$(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*/

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

相关文章：