如何確保元素在PageLoad上添加類之前已加載

我有以下代碼，它首先在頁面加載時將導航欄加載到網站（這是爲了不必爲每個導航條創建新的導航欄頁）：如何確保元素在PageLoad上添加類之前已加載

<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'); 
});

但這似乎並沒有任何工作，除非導航後刷新頁面。

來源

2016-07-15 Bassie

你知道的諧音是什麼？ – madalinivascu

@madalinivascu我已經在'Ruby on Rails'中使用過它們，但從來沒有在純css/html/js頁面中使用過 - 這可能嗎？ – Bassie

檢查此http://stackoverflow.com/questions/4995440/add-class-to-object-on-page-load – vignesh

請嘗試以下

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

來源

2016-07-15 10:57:19 madalinivascu

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

來源

2016-07-15 10:58:05 Anju

我已經嘗試過，類似於我的解決方案中的腳本，它似乎並未等待元素在嘗試添加類之前加載。其他答案似乎雖然 – Bassie

雖然此代碼片段可以解決問題，[包括解釋]（//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）真的有助於改善您的帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。也請儘量不要使用解釋性註釋來擠佔代碼，因爲這會降低代碼和解釋的可讀性！ – FrankerZ

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

     });

來源

2016-07-15 11:09:34 Mogli

如何確保元素在PageLoad上添加類之前已加載

回答

相關問題