Giving an active li element a different background

Question

I am trying to work on achieving some-thing like this as shown in the image taken from IP-Board's website. ip image

My code is like the following:-

<ul class="navmenu">
 <li>//1st drop down box</li>
 <li>// 2nd drop down box</li>

Now I want the li items background to change to white when a user clicks on it. I know this can be done via Jquery but I am not very well versed with it. Hope any one of you can help me.

I tried this guide but did not work How can I highlight a selected list item with jquery?

Also please keep in mind that both the li elements contain jquery drop-downbox.

UPDATE I want the Jquery so that if I click it once more the active class should be removed.

Mohsen Safari · Accepted Answer · 2013-11-11T08:02:14.693

2

you can get active element by :active after selector like this:

DEMO

CSS

li:active{
    background:red;
}

update:

if you want to background stay red you need to use JQuery. first create a class that you want style the active item like this:

.active{
        background:red;
    }

then use this JQuery code:

$("li").click(function(){
    $("li.active").removeClass("active");
    $(this).addClass("active");
});

jsFiddle is here

edited Nov 11 '13 at 08:02

answered Nov 11 '13 at 07:54

Mohsen Safari

6,669
5
42
58

Well using this will not make it stay there permanent. The red background will just be seen for a split second before vanishing. So psudeo selector wont do the job. – Balabky9 Nov 11 '13 at 07:56
@Balabky9: answer updated. style one `li` at the same time when you click on it. – Mohsen Safari Nov 11 '13 at 08:04
Okay I am using MyBB. So will this Javascript affect all the li elements present? – Balabky9 Nov 11 '13 at 08:09
Also should I add this script inside my HTML using tags? – Balabky9 Nov 11 '13 at 08:10
you can change selector as you wish like `ul.navmenu li` to work with special menu. and you can add ` – Mohsen Safari Nov 11 '13 at 08:15
I have added the jquery from google CDN. Still its failing to function. Maybe I am adding it the wrong way. – Balabky9 Nov 11 '13 at 08:16
this is a simple JQuery code, I think you need to learn about JQuery. I can not help you in comment posts! – Mohsen Safari Nov 11 '13 at 08:19

score 1 · Answer 2 · answered Nov 11 '13 at 08:09

1

$('ul li').on('click', function(){
$(this).addClass('highlight');
});

and in css add class ".highlight"

.highlight { background-color:red; }

answered Nov 11 '13 at 08:09

Aown Raza

2,023
13
29

score 0 · Answer 3 · answered Nov 11 '13 at 08:01

0

jQuery:

$('ul li').on('click', function(){
  $(this).toggleClass('highlight');
});

CSS:

.highlight{
    background-color: red;
}

DEMO

answered Nov 11 '13 at 08:01

alexP

3,672
7
27
36

I think he wants active one `li` in the same time, so this in not working, because you can active all items at the same time – Mohsen Safari Nov 11 '13 at 08:03

Giving an active li element a different background

3 Answers3

update: