jQuery包括html - 將標題添加到標題

我正在使用jQuery將標題包含到我的主索引頁面（以及其他頁面）。我想要使用CSS來突出顯示導航欄的不同項目（位於header.html中），具體取決於用戶當前處於哪個頁面。說出用戶是否在主頁上，那麼CSS會向header.html中的導航欄的Home項添加一個類。我遇到的問題是，類沒有得到補充，大概是因爲我想添加一個類是在其他元素（jQuery的加載）文件jQuery包括html - 將標題添加到標題

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加載到body中的div中。然後在我的身上腳本標籤我的類navSelected添加到Header元素

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，但該類不會被添加，我不知道該修復程序是什麼。

如果我使用jQuery從header.html那麼該類被加精中添加的類別，但違背了只強調相關的導航項目的用戶是目前

頁面的目的

來源

2016-05-14 Simon

這個功能，我不知道，但嘗試這個辦法： '$（「＃頭」）的負載（「header.html中」，函數（）{$（」 .homeNav> a'）.addClass（「navSelected」）;}）;' –

@PeterDarmis這種方法確實沒有意義。如果選擇器本身不起作用，爲什麼'find（）'工作？ – charlietfl

對不起，是的。 @charlietfl –

jQuery的load()只是$.ajax的快捷方式，它是異步的。

你必須等待要加載的內容，然後才能操作它，你會做，通過使用回調

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

來源

2016-05-14 19:07:49 adeneo

-1

你$('.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>

來源

2016-05-14 19:13:04 gdlmx

''沒有'onload'事件。非常少的元素。在插入元素後直接調用完成回調中的代碼沒有任何問題 – charlietfl

您對onload事件是正確的。但是，在GET/POST請求完成後，AJAX回調會被觸發，而不會創建DOM元素。雖然變化很小，但仍然可能失敗。 – gdlmx

在'load（）'的情況下不成立。 – charlietfl

jQuery包括html - 將標題添加到標題

回答

相關問題