最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery addClass to list item - Stack Overflow

programmeradmin0浏览0评论

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 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
Add a ment  | 

3 Answers 3

Reset to default 12

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.

发布评论

评论列表(0)

  1. 暂无评论