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

【问题标题】：Changing menu background color when selected particular menu in sidebar在侧边栏中选择特定菜单时更改菜单背景颜色
【发布时间】：2016-08-04 07:26:29
【问题描述】：

在页面中选择侧边栏菜单时如何更改菜单背景颜色？当我在不同的 html 文件（命名为 sidebar.html）中创建了这个侧边栏菜单并将该 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>

【问题讨论】：

您将需要 javascript，但请先向我们展示您尝试过的内容。
@Pipo 实际上我不知道如何为此添加 javascript，所以我已经发布了
谁能帮我提前谢谢

标签： javascript jquery html css

【解决方案1】：

我认为您的意思很简单：hover css 伪选择器？尝试将此添加到页面：

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

或者还有一个 :active 选择器

【讨论】：

不悬停需要将菜单显示为活动状态，背景颜色应为红色，直到我选择另一个菜单后选择新菜单，背景颜色应更改

【解决方案2】：

由于您在问题中添加了 jQuery 标签，下面的代码应该可以工作。

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

但从代码看来，您正在尝试使用 Angular（我在这里可能是错的）。如果是，请不要使用 jquery 解决方案。尝试使用 ng-style/ng-class 解决此要求，或者为菜单项编写自定义指令。

【讨论】：