javascript - 如何将突出显示的导航项更改为蓝色背景而不是移动 View 中的蓝色边框底部

Question

我喜欢将突出显示的导航项更改为蓝色背景，而不是蓝色边框下划线。查看截图

我的代码在这里:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" arial-expand="false">
              <i class="fa fa-bars"></i>
           </button>
            <a href="http://www.aspentech.com/" class="navbar-brand">
              <img class="img-responsive" src="img/logo@2x.png">
            </a>
        </div>
        <div class="login">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active">
                  <a id="loginLink" href="#" class="navbar-text navbar-icon-link">
                  <span class="navbar-profile-icon center-block"></span>Hello, Sijie!</a>
                  </li>
               </ul>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav subnav-nav">
                <li class="subnav">
                  <span class="navbar-text subnav-link" id="subnav-link-1"><a class="sub" href="index.html">aspenOne Update Center</a></span>
                </li>
                <li class="subnav active">
                  <span class="navbar-text subnav-link" id="subnav-link-2"><a class="sub activated" href="download center.html">aspenOne Download Center</a></span>
                </li>
              </ul>
         </div>
      </div>
     </nav>

https://jsfiddle.net/Swathi56/cbe4jdg6/

Answer 1

试试这个代码:

.activated {
    background: none repeat scroll 0 0 #007ABD;
    color: white;
    height: 40px;
    cursor: pointer;
    -webkit-transition: border-color 0.8s;
    transition: border-color 0.8s;
    padding-bottom: 16px;
}

要将颜色从蓝色更改为白色，请添加以下内容:

.navbar-collapse .navbar-text.subnav-link a.activated {
    color: white;
}

要更改移动 View ，您需要使用media queries 。例如，对于小于 600 像素的场景，媒体将如下所示:

@media (max-width: 600px) {
  .activated {
        background: none repeat scroll 0 0 #007ABD;
        color: white;
        height: 40px;
        cursor: pointer;
        -webkit-transition: border-color 0.8s;
        transition: border-color 0.8s;
        padding-bottom: 16px;
   }

   .navbar-collapse .navbar-text.subnav-link a.activated {
       color: white;
   }
}