2016-08-09 202 views
1

CSS: Wie ändert man die Farbe des aktiven Navigationsseitenmenüs beim Dropdown-Klick?

<div class="menuBar"> 
 
<li ng-if="" class="dropdown"> 
 
<a class="dropdown-toggle" data-toggle="dropdown" href="#" ui-sref="#"> 
 
           ADMIN 
 
</a> 
 
    <ul class="dropdown-menu animated fadeInDown"> 
 
    <li><a href="#" ui-sref="userList">Users</a></li> 
 
    <li><a href="#" ui-sref="Roles">Roles</a></li> 
 
</ul> 
 
</li>

Wenn ich versuche, Benutzer oder Rollen in ADMIN Registerkarte auszuwählen, navigieren, aber ich möchte Admin highligted lassen Sie es mich wissen, wie CSS zu schreiben. Ich versuchte es mit der aktiven und ausgewählten Klasse, aber es funktioniert nicht. Ich kann meinen vollständigen Code nicht posten. Lassen Sie mich irgendeine Lösung dafür wissen.

<li> muss markiert werden, wenn Sie in <ul> auswählen.

Ich versuche die Farbe der aktiven oder aktuellen Seitennavigation zu ändern, die vom Benutzer auf meiner Website ausgewählt wird. Was mache ich falsch?

(Dies ist mein Navbar-Bild Ich bin in ADMIN-Seite, aber es ist nicht markiert).

+0

Bitte fügen Sie Ihren CSS-Code versucht, so weit – Nehemiah

+0

.dropdown-Menü> .active> a, .dropdown-Menü> .active> a: hover, .dropdown-Menü> .active> a: focus { Hintergrund: # 8CC152; } dies ist die CSS für UL in Li aufgeführt, das ist es ich habe viele CSS für Dropdown-Menü und Drop-Down-Toggle, aber keine CSS für Dropdown seine komplizierte Navbar ich habe viele Klassen, können Sie mir bitte eine Idee, welche Klasse Ich brauche – epkr

+0

Haben Sie versucht: besuchte Klasse? oder: Fokusklasse? Konzentrieren Sie sich auf Ihre a-Elemente könnte funktionieren. –

Antwort

0

Dies wird funktionieren. Kannst du es bitte versuchen?

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Recaptcha by VividCortex</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="~/Scripts/jquery-1.9.1.min.js"></script> 
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(function() { 
      $("ul li a").click(function() { 
       $(".dropdown-toggle").css("color", "#2a6496"); 
       var ul = $(this).parent().parent().prev(); 
       ul.css("color", "red"); 
       var ap = "dh"; 
      }); 
     }) 
    </script> 
    <div class="menuBar"> 
     <span ng-if="" class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" ui-sref="#"> 
       ADMIN 
      </a> 
      <ul class="dropdown-menu animated fadeInDown"> 
       <li><a href="#" ui-sref="userList">Users</a></li> 
       <li><a href="#" ui-sref="Roles">Roles</a></li> 
      </ul> 
     </span> 
     <span ng-if="" class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" ui-sref="#"> 
       CRUD 
      </a> 
      <ul class="dropdown-menu animated fadeInDown"> 
       <li><a href="#" ui-sref="Insert">Insert</a></li> 
       <li><a href="#" ui-sref="Update">Update</a></li> 
      </ul> 
     </span> 
     <span ng-if="" class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" ui-sref="#"> 
       MASTERS 
      </a> 
      <ul class="dropdown-menu animated fadeInDown"> 
       <li><a href="#" ui-sref="RegionList">RegionList</a></li> 
       <li><a href="#" ui-sref="CountryList">CountryList</a></li> 
      </ul> 
     </span> 
    </div> 
</body> 
</html> 
+0

https://jsfiddle.net/2arcu0sv/3/ – kblau