引导菜单活动页面不显示样式答案

【问题标题】：boostrap menu active page dont show style引导菜单活动页面不显示样式
【发布时间】：2016-08-09 05:55:31
【问题描述】：

所以我希望活动页面使用与悬停设置相同的设置。无论我如何更改 css，我都无法让它工作......自从我在这个页面上工作了很长时间，所以我可能会错过一些简单的东西......

更改前的 Style.css

.navbar-default .navbar-brand {
    color: #fff;
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#202020;
    border-width:0.1pt;
  }
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: #fff;
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#707070;
    border-width:0.1pt;
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
  }
  .navbar-default {
    font-size: 14px;
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
    border-width: 0px;
    border-radius: 0px;
  }
  .navbar-default .navbar-nav>li>a {
    color: #fff;
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
    border-left:none;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#202020;
    border-width:0.1pt;
  }
  .navbar-default .navbar-nav>li>a:hover,
  .navbar-default .navbar-nav>li>a:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#707070;
    border-width:0.1pt;
  }
  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:hover,
  .navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: rgba(231, 231, 231, 1);
  }
  .navbar-default .navbar-toggle {
    border-color: #ddd;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: #ddd;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
  }
  .navbar-default .navbar-toggle:hover .icon-bar,
  .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #000000;
  }
.navbar-default .navbar-right>li>a {
  border-left:solid;
border-width:0.1pt;
border-color:#202020;
}

菜单

<div class="navbar navbar-default navbar-top" role="navigation">
    <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 href="index.php" class="navbar-brand">Per Källström</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Comming soon</a></li>
                <li><a href="#">Comming soon</a></li>
                <li><a href="contact.php" class="active">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="admin.php">Admin</a></li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

你确实错过了一些简单的东西，li 将有 .active 类，所以将它添加到所有悬停效果中：.navbar-default .navbar-nav>li.active>a
@LuukSkeur 谢谢，但是稍微改变了一下，因为我希望 a 处于活动状态而不是 li :D navbar-default .navbar-nav>li>a.active
没问题，干杯。请接受我的评论（作为答案）并关闭问题。

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

根据您的 HTML 代码。 a 标签具有活动类。那么它应该是.navbar-default .navbar-nav>a.active, 而不是.navbar-default .navbar-nav>.active>a。

重要提示

然而，引导程序声明活动类应该在li 元素上而不是在a 标记上切换。请查看以下链接以获取正确的 HTML。 https://getbootstrap.com/examples/navbar/

例如：

<li class="active"><a href="contact.php" >Contact</a></li>

【讨论】：

【解决方案2】：

现在作为答案：你确实错过了一些简单的东西，li 将有 .active 类，所以将它添加到所有悬停效果中：.navbar-default .navbar-nav>li.active>a

【讨论】：