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.
Share Improve this question edited Dec 18, 2014 at 21:08 baao 73.3k18 gold badges150 silver badges207 bronze badges asked Dec 18, 2014 at 21:07 Borisw37Borisw37 7592 gold badges10 silver badges32 bronze badges 4-
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 itsDOM
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
Reset to default 12The 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.