Using addClass in jQuery UI Menu

Question

I'm using jQuery UI Menu for navigation purpose. I want that when one item is clicked it's background color should change (to show active state) and when user clicks on other item then the new item's color should change and the previous one's color should revert back to original.

I used addClass for that but somehow it's not working, let me know where I'm doing wrong.

Fiddle link

HTML:

<ul id="menu" class="nav">              
   <li><a href="#" >Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
   <li><a href="#">Item 5</a></li>
   <li><a href="#">Item 6</a></li>
</ul>

CSS:

.selected{
    color:red;
}

jQuery

  $(function() {
    $( "#menu" ).menu();
  });
  $(function () {
  $(".nav a").click(function () {
    $(this).parent().addClass('selected'). // <li>
      siblings().removeClass('selected');
  });
  });

You must use background-color instead of color.

user1823761
– user1823761

2013-05-30 05:07:58 +00:00
Commented May 30, 2013 at 5:07 — user1823761
– user1823761, Commented May 30, 2013 at 5:07
Yes, got it, stupid mistake.

Chankey Pathak
– Chankey Pathak

2013-05-30 05:16:13 +00:00
Commented May 30, 2013 at 5:16 — Chankey Pathak
– Chankey Pathak, Commented May 30, 2013 at 5:16

PSL · Accepted Answer · 2013-05-30 05:02:33Z

2

Apply style on the anchor instead of li. since anchor's inherited red color gets overridden by .ui-widget-content a

.selected a {
    color:red;
}

Demo

With background color:-

Demo

answered May 30, 2013 at 5:02

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

Chankey Pathak Over a year ago

Oops, just had to use background-color instead of color.

sarveshseri Over a year ago

If I do ".selected a {color:inherited;}" then it will take priority over ".ui-widget-content a" right ??

PSL Over a year ago

@ChankeyPathak suit yourself. This has both the options working.. :)

PSL Over a year ago

@SarveshKumarSingh not really, it is inherit. But then you will have to have both the style rules like jsfiddle.net/BNWBX.

sarveshseri Over a year ago

@PSL yes that ".selected {color:red;}" is already there.. thanks for confirming. :)

vinothini · Accepted Answer · 2013-05-30 05:03:27Z

0

Please have a look at http://jsfiddle.net/PaHXs/8/

May i know is this your requirement or not.

I did change in

.selected{
    background-color:red;
}

answered May 30, 2013 at 5:03

vinothini

2,6124 gold badges29 silver badges42 bronze badges

Comments

sarveshseri · Accepted Answer · 2013-05-30 05:59:45Z

0

$(this).parent().siblings().removeClass('selected');
$(this).parent().addClass('selected');

.selected{
    color:red;
}

.selected a {
    color:inherit;
}

edited May 30, 2013 at 5:59

answered May 30, 2013 at 5:02

sarveshseri

14k30 silver badges50 bronze badges

Collectives™ on Stack Overflow

Using addClass in jQuery UI Menu

3 Answers 3

Demo

Demo

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related