在Bootstrap 3 Navbar链接上保留活动类

时间：2017-07-24 07:26:00

标签： css twitter-bootstrap

我知道在这个问题上有类似的帖子，但我无法让任何解决方案适合我。

我想更改用户所在当前页面的菜单链接的颜色和背景颜色。但是，当我使用工作网址＆＃39;风格不保留。

如果我对URL使用哈希（＃）而不是背景颜色改变我想要的方式，我认为因为页面没有重新加载。

我已经尝试了很多JS和JQuery解决方案，但我无法为我工作。

下面的CSS总是足以完成Wordpress Bootstrap Navs的工作，但Wordpress Nav Walker正在添加活动类。

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #fff;
background-color: #000;
}

以下是完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Navbar Template for Bootstrap</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:active, .navbar-default .navbar-nav>li>a:hover {
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    color: #fff;
}    

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    color: #fff;
}  

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    color: #fff;
}  

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: transparent;
    background: -moz-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(91,179,0)), to(rgb(56,141,0)));
    background: -webkit-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: -o-linear-gradient( -90deg, rgba(91,179,0,1), rgba(56,141,0,1) );
    background: linear-gradient( to bottom, rgba(91,179,0,1), rgba(56,141,0,1) );
    color: #fff;
}



</style>

<script>

</script>

  </head>

  <body>

    <div class="container">

    <br>
    <br>
    <br>
    <br>


<!-- Static navbar -->
<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"> &nbsp; </a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">Home</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Services <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              <li><a href="/about-us.html">About</a></li>
              <li><a href="/about-us.html">Contact</a></li>

              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>


    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--  Jquery  -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </body>
</html>

1 个答案:

答案 0 :(得分：0)

你有没有尝试过正确的＃34; .navbar-nav＆gt; .active＆gt; a：focus＆＃34;使用您自己的自定义类，如下所示，或者如果您被允许使用＆＃34;！important＆＃34;尝试一下。

例如：.custome-class.navbar-nav＆gt; .active＆gt; a：focus

此致 Sijo Jose

相关问题
最新问题