使用javascript添加css類到使用javascript實現的標頭

我正在開發一個包含許多html文件的網站，最近我開始使用分離的頁眉和頁腳html文件，以便通過在頁面中使用javascript實現它們以節省時間。問題是現在所有的頁眉和頁腳看起來都是一樣的，而在使用這個方便的技術之前，我已根據頁面高亮顯示頁面（這是通過手動將類添加到不同的<a>標記完成的，具體取決於頁面（html文件）它是），但現在我找不到一種方法來針對特定的<a>，將只針對特定的HTML來改變它的CSS。該代碼看起來是這樣的： HTML home.html的：使用javascript添加css類到使用javascript實現的標頭

<div id="header"></div>

HTML了header.html：

<ul> 
    <li id="LI_56"> 
       <a href="pages/home.html" id="A_57">Home</a> 
    </li> 
    </ul>

的Javascript看起來是這樣的：

$(function(){ 
    $("#header").load("header.html"); 
    $("#footer").load("footer.html"); 
});

CSS是這樣的：

.home{ 
background-color:red; 
}

什麼我試圖做的是：

  <script> 
      $(document).ready(function() { 
      document.getElementById('A_57').className = 'home'; 
      }); 
      </script>

，但我得到的錯誤：「類型錯誤：的document.getElementById（...）爲空」。當頭文件已經在我的home.html文件中，並且沒有通過javascript實現時，一切正常，但這不是一個選項。希望任何人都知道解決方案。爲每個html使用不同的css文件也顯然不是一種選擇 - 它應該是直截了當，開發者友好（智能&懶惰）儘可能！：）提前致謝！

來源

2016-08-18 Mkey

也許你想解僱前的JavaScript函數加載一個？ –

函數應該在加載之後觸發，但顯然會發生相反的情況。我已經有了一個解決方案，雖然我希望能有更好的解決方案。 – Mkey

在一個「完整」的回調設置類名，這個回調是一直進行後處理和HTML插入後執行：

$(function(){ 
    $("#header").load("header.html", function() { 
     document.getElementById('A_57').className = 'home'; 
    }); 
    $("#footer").load("footer.html"); 
});

來源

2016-08-18 09:42:33 Dhananjay

這是因爲該元素尚不存在。加載html後添加類。

$(function(){ 
    $("#header").load("header.html", function() { 
     var $homeLink = $('#header').find('a').filter(function() { 
      return $.trim($(this).text()) === 'Home' 
     }); 

     $homeLink.addClass('home'); 
    }); 
    $("#footer").load("footer.html"); 
});

來源

2016-08-18 09:42:01 Jamy

這是有效的，但我有很多不同的頁面，這意味着我不得不在我的HTML頁面中添加此腳本只是更改類名，但也許有一種方法，我可以在一個單獨的.js文件中使用此腳本，只需更改這個js的類通過添加一些額外的.js到我的html頁面，甚至這js可以適應並知道要設置哪個類取決於我的html頁面名稱或其他信息？ – Mkey

'header.html'是否總是包含您在上面發佈的結構？這不是非常優化的代碼，但我已經更新了我的答案以幫助解決這個問題。加載標題後，它會找到一個帶有文本「Home」的錨點鏈接，並向該錨點鏈接添加一個「home」類。 – Jamy

使用javascript添加css類到使用javascript實現的標頭

回答

相關問題