jQuery CSS menu not selecting the active link

Question

What is wrong with this and how could I fix it?

I have a 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?

Here's 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>

Here's 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');
  });
});

have you tried adding !important to the css attributes oh .selected? narrow down your problem. — seventeen
– seventeen, Commented Apr 15, 2010 at 0:25

David Thomas · Accepted Answer · 2010-04-14 22:54:46Z

2

Because of CSS inheritance. The ul#menu_nav a css rule will always outweigh the .selected rule. Try changing the selector

#ul.menu_nav a.selected{

}

edited Apr 14, 2010 at 22:54

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Apr 14, 2010 at 22:20

czarchaic

6,34833 silver badges24 bronze badges

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

1 Comment

Ronedog Over a year ago

Im a bit confused...is the selector your talking about the css selector or the jquery one?

Ronedog · Accepted Answer · 2010-04-15 04:14:39Z

Thanks for the tips it helped me rethink myself back to something more basic...if anyone comes along, below is the css and jquery code that solved the problem I was having.

Basically, I just created two classes and swapped them both then used some jquery selectors to add/remove the classes to get the effect I was looking for.

$(function(){
              $(".menu_buttons li>a").click(function(){
                $(this).addClass('selected').removeClass('button'). // <li>
                  parents().siblings().children("a").removeClass('selected').addClass('button');
              });
            });

The final css looks like this:

ul#menu_nav
{
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav a.button
{
    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;

    float:left;
    text-decoration:none;
    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;
}

Collectives™ on Stack Overflow

jQuery CSS menu not selecting the active link

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related