jQuery包含html-将类添加到头中

jQuery include html - adding class to header

本文关键字：添加 包含 html- jQuery      更新时间：2023-09-26

我使用jQuery在我的主索引页面（以及其他页面）中包含一个页眉。我想根据用户当前所在的页面，使用CSS突出显示导航栏（位于header.html中）的不同项目。假设用户在主页上，则CSS会在header.html中导航栏的主页项目中添加一个类。我遇到的问题是该类没有被添加，可能是因为我试图将一个类添加到另一个（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类添加到header.html中homeNav类的跨度中，但该类没有被添加，我不确定修复方法是什么。

如果我使用jQuery从header.html中添加类，那么该类会被添加得很好，但这违背了只突出显示与用户当前在上的页面相关的导航项目的目的

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

您必须等待内容加载，然后才能对其进行操作，您可以通过使用回调来做到这一点

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

$('.homeNav > a')可能找不到DOM元素，因为这一行是在加载（创建）内容之前执行的。所以像@KartikeyaSharma建议的那样使用load的回调。

有一点变化是AJAX回调不起作用，因为创建DOM元素需要时间，所以在header.html:末尾调用这个函数更安全

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

在您的header.html中，在末尾调用此函数

...
<span class="contactNav"><a href="/contact">Contact</a></span>
<script>onNavReady()></script>
相关文章：