jquery css menu not selecting the active link
- by Ronedog
What is wrong with this and how could I fix it. I have css menu (horizontal) that I want the background and font to be changed when one of the items is selected. I found another post that gave me some jquery code to help make it work, and I thought I had it coded right, but when I click on an item to change its class it adds the class, but the background and font stay the same? Any ideas here?
Heres the HTML
<ul id="menu_nav" class="buttons">
<li>
<a href="#" onclick="' . $menu_path . '">Item 1</a>
</li>
<li>
<a href="#" onclick="' . $menu_path . '">Item 2</a>
</li>
<li>
<a href="#" onclick="' . $menu_path . '">Item 3</a>
</li>
</ul>
Heres the CSS:
ul#menu_nav
{
float:left;
width:790px;
padding:0;
margin:0;
list-style-type:none;
background-color:#000099;
}
ul#menu_nav a
{
float:left;
text-decoration:none;
color:white;
background-color:#000099;
padding:0.2em 0.6em;
border-right:1px solid #CCCCCC;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
font-weight: bold;
position: relative;
height: 21px;
line-height:1.85em;
}
ul#menu_nav a:hover {
background-color:#F1F4FE;
color:#000099;
border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}
.selected {
background-color:#F1F4FE;
color:#000099;
border-top:1px solid #CCCCCC;
}
Here's the Jquery:
$(function(){
$(".buttons li>a").click(function(){
$(this).parent().addClass('selected'). // <li>
siblings().removeClass('selected');
});
});
