I am struggling to understand why I cannot remove a class from an element and then add a new one. Changing the CSS using .css(...) works, but for some reason .removeClass and .addClass are not functioning.
Interestingly, I am able to successfully add and remove classes on some spans. Can anyone point me in the right direction? Thank you!
Here is the HTML:
<ul id="menu">
<li><span> </span><span><a href="#">Home</a></span></li>
<li><span> </span><span><a href="#">Test</a></span></li>
<li><span> </span><span><a href="#">Test</a></span></li>
<li><span> </span><span><a href="#">LaLa</a></span></li>
<li><span> </span><span><a href="#">Test</a></span></li>
<li><span> </span><span><a href="#">Blah</a></span></li>
</ul>
Below is the CSS:
.menuText{
text-decoration: none;
color: red;
}
.menuTextA{
text-decoration: none;
color: #1A4588;
}
And here is the jQuery:
$('li', 'ul#menu').each(function() {
$(this).mouseover(function() {
$('span', this).eq(0).removeClass('menuTabLeft'); // this works
$('span', this).eq(1).removeClass('menuTabRight'); // this works
$('span', this).eq(0).addClass('menuTabLeftA'); // this works
$('span', this).eq(1).addClass('menuTabRightA'); // this works
//$('a', this).eq(0).removeClass('menuText'); // this doesn't work
//$('a', this).eq(0).addClass('menuTextA'); // this doesn't work
$('a', this).eq(0).css('color', '#1A4588'); // this works
});
});