javascript - Check if element has the class active, if so, add class to a different element - Stack Overflow

admin管理员组

文章数量:1201374

Building a website for a client but only for the mainpage I need to get a class on the main div for css purposes. For this I am trying to look for an active class on menu item for home, and if it has the active class, then add a different class to the main webpage's div.

so far i cant get much further then this:

<script>
$(document).ready(function() { 
if $('li.level1.item101').hasClass('active');
$('#main').addClass('woodwork');}
});
</script>

the html involved for this (the li item) looks like this when active with the div somewhere down below in the page itself

<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
<div id="main"> </div>

my current code doesn't seem to be able to grab either the active li or the div, any help would be greatly appreciated

Building a website for a client but only for the mainpage I need to get a class on the main div for css purposes. For this I am trying to look for an active class on menu item for home, and if it has the active class, then add a different class to the main webpage's div.

so far i cant get much further then this:

<script>
$(document).ready(function() { 
if $('li.level1.item101').hasClass('active');
$('#main').addClass('woodwork');}
});
</script>

the html involved for this (the li item) looks like this when active with the div somewhere down below in the page itself

<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
<div id="main"> </div>

my current code doesn't seem to be able to grab either the active li or the div, any help would be greatly appreciated

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 13, 2014 at 12:17 Jasper Doornbos asked May 13, 2014 at 12:02 Jasper DoornbosJasper Doornbos 8511 gold badge11 silver badge44 bronze badges 4

• 3 div next to li?? that is invalid DOM. – Milind Anantwar Commented May 13, 2014 at 12:03
• 1 Also you dont need to use .find() to get an id just use $('#main') since IDs must be unique – Anton Commented May 13, 2014 at 12:05
• 1 Your current code looks like it is invalid. Try writing an actual if statement with all the parenthesis, curlies: if( ... ){ ... }. You also don't want to do addClass('.woodwork') but .addClass('woodwork') – christian314159 Commented May 13, 2014 at 12:07
• The div isn't next to the li, its nested in a ul and all that but if i'd post the whole html of the site we're building you get a huge list of unnecessary code. And ok thanks Anton :) i'll change that part, but it still wont add the new class to it with that change – Jasper Doornbos Commented May 13, 2014 at 12:08

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 16

First of all, you have some errors with your code, the html should be:

<li class="level1 item101 active current"> active</li>
<li class="level1 item102"> second</li>
<div id="main"> main </div>

and the javascript:

$(document).ready(function(){
  if ( $('li.level1.item101').hasClass('active') ) {
    $('#main').addClass('woodwork');
  }
});

Here is a working fiddle

If this is your HTML

<ul>
    <li class="level1 item101 active current"> </li>
    <li class="level1 item102"> </li>
</ul>
<div id="main"> </div>

The JavaScript should look like this

$(document).ready(function(){
    if ($('li.item101').hasClass('active'))
        $('#main').addClass('woodwork');
});

Here I just look if the Listelement with the class item101 has the class active, if it is so I give the div-Tag with the ID main the class woodwork

本文标签：