javascript - 如何在页面加载时添加类之前确保元素已加载

Question

我有以下代码，它首先在页面加载时将导航栏加载到网站(这样我就不必为每个页面创建新的导航栏):

<div id="nav"></div>

<script>$( "#nav" ).load( "nav.html" );</script>

为了显示该页面的“事件”选项卡，我有以下脚本:

<script>
    window.onload = function() {
        document.getElementById('lindex').className = 'active';
    };
</script>

但是，当页面加载时，我在控制台中看到此错误(针对 document.getElementById 行):

index.html:70 Uncaught TypeError: Cannot set property 'className' of null

当我导航到该页面时，“事件”选项卡不会更新。奇怪的是，当我重新加载页面时，它似乎确实添加了类，但断断续续。有谁知道为什么会这样？

这是导航栏 (nav.html) 的代码:

<nav class="navbar navbar-inverse ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    <a href="#" class="navbar-left navbar-logo"><img src="/img/logo.png"></a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li id="lindex" class="listitem"><a href="index.html">Home</a></li>
        <li id="lpandp" class="listitem"><a href="productsandpurchasing.html">Products & Purchasing</a></li>
        <li><a href="#about">Freight & Distribution</a></li>
        <li><a href="#about">Blog</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div>
  </div>
</nav>

---

我也试过:

$(function() {
  $('#about').addClass('expand');
});

但这似乎也不起作用，除非我在导航到页面后刷新页面。

Answer 1

尝试以下操作

<script>$( "#nav" ).load( "nav.html",function(){
  $('#lindex').addClass('active');// add the class after the nav is loaded
});</script>