在側欄中選擇特定菜單時更改菜單背景顏色

如何在頁面中選擇側欄菜單時更改菜單背景顏色？當我在不同的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

在側欄中選擇特定菜單時更改菜單背景顏色

回答

相關問題