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未捕获的TypeError：无法将属性'className'设置为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>

Answer 2

$("#lindex").addClass("Your Class Name");

Answer 3

       $( document ).ready(function() {
            console.log( "ready!" );
             $( "#nav" ).load( "nav.html");
             console.log( "after load nav.html!" );
                     //add the class here 
             $('#lindex').addClass('active');

        });

如何在PageLoad上添加类之前确保元素已加载

3 个答案: