单击后将导航栏下拉列表按钮更改为红色答案

【问题标题】：Change navbar dropdownlist button to red after clicking on it单击后将导航栏下拉列表按钮更改为红色
【发布时间】：2017-12-02 05:12:13
【问题描述】：

我需要找到一种方法来设置下拉列表按钮的样式，以便在我通过单击它获得焦点后变为红色。我真的需要知道这是在引导程序中还是通过 JavaScript 完成的。主要问题是每次我单击导航栏上的下拉列表按钮时，它默认为黑色，我尝试在引导程序、JavaScript 和其他方式中更改它，但老实说我没有运气。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" runat="server" href="~/Default.aspx" style="text-align: left; width: 94px; margin-right: 70px;">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/icons/FCOTICON.png" Height="55px" Width="110px" /></a>
            <a class="navbar-brand" runat="server" href="~/Resources/aspx">Resources</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown" style="background-color:red;">
                    <a href="#" class="dropdown-toggle, navText" data-toggle="dropdown"  role="button" aria-expanded="true" style="color: #2A4B7B;">Apps<span class="caret"></span></a>
                     <ul class="dropdown-menu" role="menu" style="overflow-y: scroll;">
                         <li><a href="">Cisco Wireless</a></li>
                         <li class="divider"></li>
                         <li><a href="">DMS</a></li>
                         <li class="divider"></li>
                     </ul>
                 </li>
             </ul>
         </div>
     </div>
 </div>

这里有两张图片可以更好地解释我的问题。

第一张图片是在我点击它之前，我的鼠标只悬停在按钮上。我不只是希望按钮是红色的，而只是在通过单击它来关注它之后。

当颜色默认为黑色时，第二张图片是我点击后的。

【问题讨论】：

简单的JS可以解决这个问题

标签： asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

Bootstrap 正在覆盖您的风格。

在你的 site.css 中，输入：

.navbar-inverse .navbar-nav > li,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: red;
}

确保 site.css 文件位于 _Layout.cshtml 文件中的 bootstrap.css 文件之后。

【讨论】：