Navigation applying class using jquery

Question

I am having problems applying CSS using jQuery on navigation panel. When user clicks a link, the class .selected should get applied.

My html code is

 <ul id="example-two">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Videos</a></li>
    </ul>

My CSS code is

#example-two li a { 
  position: relative; 
  z-index: 200;
  background-image: -moz-linear-gradient(#6C6C6C, #4A4A4A);
  border-radius:10px; 
  color: #FFF; 
  font-size: 14px; 
  display: block; 
  float: left; 
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase; 
}
#example-two li a:hover {
    background-image: -moz-linear-gradient(#ed2024, #c8171a);
    color: white; 
}

.selected{
    background-image: -moz-linear-gradient(#ed2024, #c8171a);
    color: white;
}

And my jQuery code is

<script>
$(document).ready(function() {
    $('ul#example-two li a').click(function() {
       $('ul#example-two li a').removeClass("selected");
       $(this).addClass("selected");
    });
})
</script>

Any idea, where am going wrong ?

There shouldn't be anything wrong with this. It must be an issue somewhere else. (Is this code actually being evaluated?) — Edd Morgan
– Edd Morgan, Commented Jul 21, 2012 at 9:07

Paul Fleming · Accepted Answer · 2012-07-21 09:40:14Z

3

You are overriding the background image value in your top CSS selector. See here for more info on css precedence.

Change .selected to #example-two li a.selected

http://jsfiddle.net/EuuhZ/1/

edited Jul 21, 2012 at 9:40

answered Jul 21, 2012 at 9:04

Paul Fleming

24.6k8 gold badges79 silver badges113 bronze badges

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

5 Comments

Jigar Jain Over a year ago

but there has to be something wrong somewhere..am unable to find it out

Paul Fleming Over a year ago

See edits. Note that your code will only work in FireFox. Is that intended?

Jigar Jain Over a year ago

no..i intend to make it work on all browsers.. where should i make the changes ?

Paul Fleming Over a year ago

@Jigar. The -moz specific background gradient will only work in FF. There are a bunch of sites that will generate the css for you. Like this one for instance: gradients.glrzad.com

Jigar Jain Over a year ago

yes..i had figured it out..thanks.and code is working fine after making the changes u suggested in ur edits :)

Collectives™ on Stack Overflow

Navigation applying class using jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related