Question

我使用jQuery在主索引页面（以及其他页面）中包含标题。我想使用CSS突出显示导航栏的不同项目（在header.html中），具体取决于用户当前所在的页面。假设用户在主页上，则CSS会将类添加到header.html中找到的导航栏的Home项目中。我遇到的问题是该类没有被添加，大概是因为我试图将一个类添加到另一个（jQuery加载）文件中的元素

index.html看起来像这样：

<html>
  <head>
    <script>
      $(function(){
        $("#header").load("header.html");
      });
    </script>
  </head>

  <body>
    <div id="header"></div>
    <script>
      $('.homeNav > a').addClass("navSelected");
    </script>
  </body>
</html>

以上是该网站的主页，我使用jQuery将header.html加载到正文中的div中。然后在我的body脚本标记中，我将类navSelected添加到标题元素

header.html看起来像这样：

<header>
  <h1>title</h1>
</header>
<nav>
  <span class="homeNav"><a href="/">Home</a></span>
  <span class="contactNav"><a href="/contact">Contact</a></span>
</nav>

因此，当用户点击此页面时，我想将navSelected课程添加到homeNav中的课程header.html的范围内，但该课程不会被添加，而且我会＆＃39 ;我不确定修复是什么。

如果我使用jQuery从header.html中添加类，那么该类会被添加正常，但这样做只会突出显示与用户当前所在页面相关的导航项目

Answer 1

jQuery＆＃39; load()只是$.ajax的快捷方式，而且是异步的。

您必须等待内容加载，然后才能操作它，并且您可以通过使用回调

来执行此操作

$(function(){
    $("#header").load("header.html", function() {
        $('.homeNav > a').addClass("navSelected");
    });
});

Answer 2

您的$('.homeNav > a')可能无法找到DOM元素，因为在加载（创建）内容之前执行此行。因此，请使用load的回调，如@KartikeyaSharma建议的那样。

AJAX回调不起作用有一点变化，因为DOM元素的创建需要时间，因此在header.html末尾调用此函数更安全：

 onNavReady = function (){$('.homeNav > a').addClass("navSelected");}

在header.html中，最后调用此函数

...
<span class="contactNav"><a href="/contact">Contact</a></span>
<script>onNavReady()></script>

jQuery包括html - 向标题添加类

2 个答案: