I'm using jQuery's addClass to add a class to an
tab so when clicked it'll change the class so it's obvious the
tab is highlighted.
My HTML
<div id="mainNav">
<ul>
<li id="LinktheBand" onclick="nav('theBand')">The Band</li>
<li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>
My CSS
#mainNav li {
float:left;
margin-right:5px;
color:white;
font-family:Tahoma;
font-weight:bold;
padding: 10px 8px 0px 8px;
background:url('../images/transparent-65.png');
height:40px;
height: 25px !important;
border:1px solid #000;
}
#mainNav li:hover {
float:left;
margin-right:5px;
color:white;
font-family:Tahoma;
font-weight:bold;
padding: 10px 8px 0px 8px;
background: #660000;
height:40px;
height: 25px !important;
border:1px solid #660000;
}
.mainNavSelected {
float:left;
margin-right:5px;
color:white;
font-family:Tahoma;
font-weight:bold;
padding: 10px 8px 0px 8px;
background: #660000;
height:40px;
height: 25px !important;
border:1px solid #660000;
}
My Javascript
function nav(a) {
$('#'+a).show();
$('#Link'+a).addClass('mainNavSelected');
}
This works properly, I check firebug and can see the class="mainNavSelected" is added, but the list element doesn't take any properties of the new class. Firebug lists all the class items for mainNavSelected, but has them all crossed out. What am i missing to replace the class of this element?
