在侧栏中选择特定菜单时更改菜单背景颜色

如何在页面中选择侧栏菜单时更改菜单背景颜色？当我在不同的html文件（名为sidebar.html）中创建此边栏菜单并将该文件包含在我的主页面中时。这里是我的代码：在侧栏中选择特定菜单时更改菜单背景颜色

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>

来源

2016-08-04 user6676279

您将需要JavaScript，但请告诉我们您先试过了什么。 – Pipo

@Pipo其实我没有得到如何添加JavaScript的，所以我已经发布 – user6676279

任何人可以帮助我，这在此先谢谢 – user6676279

我想你的意思很简单：悬停的CSS伪选择？尝试添加此页：

<style> 
li:hover{ 
    background-color: #ccc; 
} 
</style>

或者也有：主动选择

来源

2016-08-04 07:34:08

不需要显示菜单作为活动和背景色应该是红色，直到我选择新的菜单在选择另一个菜单后，应该改变背景颜色 – user6676279

正如你所添加的jQuery标签进入正题，下面的代码应该工作。

$('li').click(function(){ 
    $(this).css('background-color', 'red'); 
});

但是从代码看起来像你正在尝试使用Angular（我在这里可能是错误的）。如果是的话，不要使用jQuery解决方案。尝试使用ng-style/ng-class来解决这个需求，或者为菜单项写一个自定义指令。

来源

2016-08-04 09:34:38 ivp

在侧栏中选择特定菜单时更改菜单背景颜色

回答

相关问题