I have multiple pages that all use a simple tab menu at the top. The menu (aka list) is stored in a separate html file:

<ul>
  <li id="Tab1"><a href='../Page1.html'> Page1 </a></li>
  <li id="Tab2"><a href='../Page2.html'> Page2 </a></li>
  <li id="Tab3"><a href='../Page3.html'> Page3 </a></li>

every page has <div id='tabs'> </div> and

$('#tabs').load('CommonTabs.html');

Everything works fine, my tabs load into the 'tabs' div. Now I want to set a class of one div on each page to "active", so that the proper style defined in a css can be applied. I tried:

$('#tabs').load('CommonTabs.html');
$('#Tab1'.addClass("active");

But that doesn't seem to work. When I do "inspect element" in a browser, the li does not have the "active" class assigned.

I have multiple pages that all use a simple tab menu at the top. The menu (aka list) is stored in a separate html file:

<ul>
  <li id="Tab1"><a href='../Page1.html'> Page1 </a></li>
  <li id="Tab2"><a href='../Page2.html'> Page2 </a></li>
  <li id="Tab3"><a href='../Page3.html'> Page3 </a></li>

every page has <div id='tabs'> </div> and

$('#tabs').load('CommonTabs.html');

Everything works fine, my tabs load into the 'tabs' div. Now I want to set a class of one div on each page to "active", so that the proper style defined in a css can be applied. I tried:

$('#tabs').load('CommonTabs.html');
$('#Tab1'.addClass("active");

But that doesn't seem to work. When I do "inspect element" in a browser, the li does not have the "active" class assigned.

• javascript
• jquery
• html
• css

• 6 $('#Tab1'.addClass("active"); should be $('#Tab1').addClass("active"); – juvian Commented Dec 18, 2014 at 21:08
• After fixing the typo mentioned above, make sure the CommonTabs.html is loaded before trying to manipulate its DOM elements. .load() is an asynchronous call. – emerson.marini Commented Dec 18, 2014 at 21:09
• Sorry about the typo, that was just in the post, not in my code. @MelanciaUK, how do I ensure that the html is loaded before manipulating it? I think that is my problem, because when I added that HTML block directly in the page, the jQuery part works correctly. – Borisw37 Commented Dec 18, 2014 at 22:06
• Check @AlexisKing answer below. – emerson.marini Commented Dec 18, 2014 at 23:11

3 Answers 3

The load function is asynchronous, so the data is not loaded when the second call executes. Perform it in a callback function instead:

$('#tabs').load('CommonTabs.html', function () {
    $('#Tab1').addClass("active");
});

You have a syntax error. Try: $('#Tab1').addClass("active");

I will give you an example to set a class to a specific element on a button click. Of course you will need to create a button with the class addClassButtonTab3 for this to work.

$('.addClassButtonTab3').click('on', function() {
    $('#tab3').addClass('active');
});

We are binding an event handler to a button with class 'addClassButtonTab3' and when it is clicked we are adding a class to an element with ID tab3.