Question

如何在页面中选择侧边栏菜单时更改菜单背景颜色？我在不同的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>

Answer 1

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

/^(([01]?\d?\d|2[0-4]\d|25[0-5])\.){3}$/

或者还有一个：主动选择器

Answer 2

正如您在问题中添加了jQuery标记一样，下面的代码应该可以正常工作。

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

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

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

2 个答案: