Bassie Bassie - 4 months ago 34
jQuery Question

Unable to Add Class on PageLoad

I have the following bit of code, which first loads a navbar to the website on page load (this is so that I don't have to create a new navbar for each page):

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


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


And to show the "active" tab for that page, I have the following script:

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


However, when the page loads, I am seeing this error in the console (for the
document.getElementById
line):


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


And the "active" tab does not update when I navigate to the page. Strangely, it does seem to add the class when I reload the page, but intermittently. Does anyone know why this might be happening?

Here is the code for the navbar (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>





I have also tried:

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


But this doesn't seem to work either, unless I refresh the page after navigating to it.

Answer

Try the following

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