2016-08-04 8 views
0

Wie kann die Hintergrundfarbe des Menüs geändert werden, wenn die Seitenleistenmenüs auf den Seiten ausgewählt sind? Wie ich dieses Sidebar-Menü in verschiedenen HTML-Datei (namens sidebar.html) erstellt und diese HTML-Datei in meiner Hauptseite enthalten. Hier ist mein Code:Ändern der Hintergrundfarbe des Menüs bei Auswahl eines bestimmten Menüs in der Seitenleiste

seitenleiste.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> 
+0

Sie werden JavaScript benötigen, aber bitte zeigen Sie uns, was Sie zuerst versucht haben. – Pipo

+0

@Pipo Eigentlich bekomme ich nicht, wie man Javascript für das hinzufügt, also habe ich gepostet – user6676279

+0

Kann mir jemand helfen, danke im Voraus – user6676279

Antwort

0

Ich denke, was Sie gemeint ist einfach: Hover CSS Pseudo-Selektor? Versuchen Sie, diese Seite hinzufügen:

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

Oder gibt es auch ein: aktive Wähler

+0

Nicht auf Schwebeflug muss das Menü als aktiv anzeigen und Hintergrundfarbe sollte rot sein, bis ich neues Menü auswähle Nach dem Auswählen eines anderen Menüs sollte die Hintergrundfarbe geändert werden – user6676279

0

Wie Sie jQuery-Tag in der Frage hinzugefügt haben, sollte unter Code arbeiten.

Aber aus dem Code sieht es so aus, als ob Sie Angular verwenden möchten (ich kann hier falsch liegen). Wenn ja, verwende keine jquery-Lösung. Versuchen Sie, diese Anforderung mithilfe von ng-style/ng-class zu lösen oder schreiben Sie eine benutzerdefinierte Anweisung für die Menüelemente.

Verwandte Themen