jQuery add class does not work

Question

Okay so basically when the page loads, I want to have a class called "active" added to my id #navHome. However, the class does not show. My HTML part is an include so I don't know if it has to do with that or if I just did something stupid wrong?

This is what I have:

HTML part:

<ul id="navList">
    <li><a href="index.php" title="Home" id="navHome">home</a></li>
    <li><a href="#" title="About" id="navAbout">about</a></li>
    <li><a href="portfolio.php" title="Portfolio" id="navPortfolio">portfolio</a></li>
    <li><a href="#" title="Contact" id="navContact">contact</a></li>
</ul>

CSS part:

.active {
    font-family: 'OpenSansBold';
    color: #3fe3ab;
    background: url('../design/images/navLiner.png') left center no-repeat;
}

jQuery part:

$(document).ready(function(){

$('#navHome').addClass('active');

});

Works here --> jsfiddle.net/cf4GD .. check if you properly included jQuery. — Adil Shaikh
– Adil Shaikh, Commented Jun 14, 2013 at 17:42
You don't have more than one element with the ID #navHome do you? And what do you mean by "My HTML part is an include"? — j08691
– j08691, Commented Jun 14, 2013 at 17:42
Yes jQuery is properly included since my other jQuery codes work. I don't have more elements with that same id. I mean that I used a PHP <?php include_once('includes/nav.php'); ?> in which the HTML is (it's not in the "actual" page). — 2339870
– 2339870, Commented Jun 14, 2013 at 17:48
Be sure that jQuery is being included before you execute your javascript. — kyle.stearns
– kyle.stearns, Commented Jun 14, 2013 at 17:48

Xarcell · Accepted Answer · 2013-06-14 19:10:41Z

1

In Chrome, right click the home button and select "inspect element". See if the class is added. Should look like:

<ul id="navList">
    <li><a href="index.php" title="Home" id="navHome" class="active">home</a></li>
    <li><a href="#" title="About" id="navAbout">about</a></li>
    <li><a href="portfolio.php" title="Portfolio" id="navPortfolio">portfolio</a></li>
    <li><a href="#" title="Contact" id="navContact">contact</a></li>
</ul>

If you see the class is added, then the problem is with the CSS. If you don't see the added class, then it's a problem with your jQuery. From there, you should be able to fix it yourself.

If your unable to resolve should be able to help you better by narrowing down the problem. Is it an issue with your jQuery or CSS? Reply back with your results so we can further assist you if you need it.

answered Jun 14, 2013 at 19:10

Xarcell

2,0216 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

2339870 Over a year ago

Thanks you for the tip. Yes, the class is showing. However, the results of it don't show. I tried adding !important to the CSS, and then font-family and color plus the background do show. I don't think this is the correct solutions though? Something must have been overriding the style.

2339870 Over a year ago

I'm sorry I just noticed I still had the class added manually. jQuery does not add the class when inspecting the element in Chrome.

Collectives™ on Stack Overflow

jQuery add class does not work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related