how to change color of selected menu in css or jquery

Question

<li>
    <a href="#bedroom" id="room_option_masterroom_a">
        <span id="room_option_master"></span> 
        <span id="room_option_span">Master Room</span>
    </a>
</li>

#masterroom_light_a:active{background-color:#0000FF}

I am trying to change color of selected menu ant it is selected until and am not select another menu from this list, i was try in CSS active tag but it is not working properly.

Could you please rephrase your question with proper punctuation and grammar? And provide more HTML for context, and display the code that is not working properly? — Michael Laszlo, Nov 21 '14 at 09:47
Please try to explain properly. It's unclear what exactly is not working what do you want? — VPK, Nov 21 '14 at 09:47
Possible (horribly written) duplicate of http://stackoverflow.com/questions/7531653/add-active-class-to-current-page-navigation-link — Rvervuurt, Nov 21 '14 at 09:49
possible duplicate of [jQuery add class .active on menu](http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu) — Rvervuurt, Nov 21 '14 at 09:50
it's simple, try this : http://jsfiddle.net/codeSpy/btu4Lc0d/ — Md Ashaduzzaman, Nov 21 '14 at 09:59

score 5 · Accepted Answer · answered Nov 21 '14 at 09:51

Simply add a class active to whatever menu item you click, and remove it from the other items...

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

});

.active {
  background-color: #0000FF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myMenu">
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
</ul>

how to change color of selected menu in css or jquery

1 Answers1