Changing menu background color when selected particular menu in sidebar
Question
How to change the menu background color when selected sidebar menus in pages? As I created this sidebar menu in different html file (named as sidebar.html) and included that html file in my main page. Here is my code:
Sidebar.html
<div id="menuwrapper" >
<ul>
<li>
<a href="#"><img src="image/dashboard-icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;"> Dashboard</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 113px; font-weight: bold;"></span>
</a>
</li>
<li>
<a href="#"><img src="image/em_current_openings_icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;font-family: sans-serif;">Curent Openings</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 88px; font-weight: bold;"></span>
</a>
</li>
<li>
<a href="renumeration.html"> <img src="image/em_remuneration_icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;font-family: sans-serif;">Remuneration</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 103px; font-weight: bold;"></span>
</a>
</li>
</ul>
</div>
renumeration.html
<html>
<head>
</head>
<body>
<div ng-include src="'sidebar.html'"></div>
</body>
</html>
2 answers
solution1
0 2016-08-04 07:34:08
I think what you meant is simple :hover css pseudo-selector? Try adding this to page:
<style>
li:hover{
background-color: #ccc;
}
</style>
Or there is also a :active selector
solution2
0 2016-08-04 09:34:38
As you have added jQuery tag into the question, below code should work.
$('li').click(function(){
$(this).css('background-color', 'red');
});
But from the code it looks like you are trying to use Angular (I can be wrong here). If yes, don't use jquery solution. Try to solve this requirement using ng-style/ng-class OR write a custom directive for the menu items.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.