CSS:如何在下拉列表中更改活动导航页面菜单的颜色?

时间:2016-08-09 15:58:04

标签: html css angularjs

    <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>

当我尝试在ADMIN标签页中选择用户或角色进行导航但我希望管理员能够高兴,请告诉我如何编写CSS。我试过使用主动和选定的类,但它没有工作;我无法发布完整的代码。让我知道任何解决方案。

当您在<li>中选择<a>时,

<ul>必须高举。

我正在尝试更改用户在我的网站上选择的活动或当前页面导航链接的颜色。我做错了什么?

(这是我的导航栏图片,我在ADMIN页面中,但没有突出显示)。

1 个答案:

答案 0 :(得分:0)

这会奏效。你能试试吗?

<!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>