CSS Change List Item Background Color with Class

前端未结

关注

 5  418

I am trying to change the background color of one list item while there is another background color for other list items.

This is what I have:

5条回答

-上瘾入骨i (楼主)

2020-12-16 01:46

Scenario: I have a navigation menu like this. Note: Link is child of list item
. I wanted to change the background of the selected list item and remove the background color of unselected list item.
```
        
            Intro
            Size
            Play
            Food
        
        

       
```
I tried to add a class .active into the list item using jQuery but it was not working
```
.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });
```
Solution: Basically, using .active class changing the background-color of list item does not work. So I changed the css class name from .active to "nav li.active a" so using the same javascript it will add the .active class into the selected list item. Now if the list item
has .active class then css will change the background color of the child of that list item .
```
nav li.active a
{
    background-color: #480048;
}
```