Fatal编程技术网
  • css/
  • Css 在引导3导航栏链接上保留活动类

Css 在引导3导航栏链接上保留活动类

css twitter-bootstrap

Css 在引导3导航栏链接上保留活动类,css,twitter-bootstrap,Css,Twitter Bootstrap,我知道在这个问题上也有类似的帖子，但我就是找不到任何适合我的解决方案 我想更改用户当前页面的菜单链接的颜色和背景色。但是，当我使用“工作URL”设置活动类的样式时，该样式不会保留 如果我对URL使用散列（#）而不是背景颜色，我想是因为页面没有重新加载 我已经尝试了很多JS和JQuery解决方案，但我无法找到任何适合我的解决方案 下面的CSS总是足以完成Wordpress引导导航的工作，但是活动类是由Wordpress导航Walker添加的 .navbar-default .navbar-nav&

我知道在这个问题上也有类似的帖子，但我就是找不到任何适合我的解决方案

我想更改用户当前页面的菜单链接的颜色和背景色。但是，当我使用“工作URL”设置活动类的样式时，该样式不会保留

如果我对URL使用散列（#）而不是背景颜色，我想是因为页面没有重新加载

我已经尝试了很多JS和JQuery解决方案，但我无法找到任何适合我的解决方案

下面的CSS总是足以完成Wordpress引导导航的工作，但是活动类是由Wordpress导航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>


引导的导航栏模板
.navbar-default.navbar-nav>li>a:focus.navbar-default.navbar-nav>li>a:active.navbar-default.navbar-nav>li>a:hover{
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
颜色：#fff；
}    
.navbar default.navbar nav>.open>a、.navbar default.navbar nav>.open>a:focus、.navbar default.navbar nav>.open>a:hover{
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
颜色：#fff；
}  
.下拉菜单>li>a:焦点，.下拉菜单>li>a:悬停{
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
颜色：#fff；
}  
.navbar default.navbar nav>.active>a、.navbar default.navbar nav>.active>a:focus、.navbar default.navbar nav>.active>a:hover{
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
背景：透明；
背景：-moz线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-webkit梯度（线性，左上，左下，从（rgb（91179,0））到（rgb（56141,0））；
背景：-webkit线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：-o-线性梯度（-90度，rgba（91179,0,1），rgba（56141,0,1））；
背景：线性梯度（至底部，rgba（91179,0,1），rgba（56141,0,1））；
颜色：#fff；
}








切换导航

    

  • 

  • 

      

    • 

    • 

    • 

    • 

    • 导航标题
      • 

    • 

    • 

    

  • 

  • 



导航栏示例
此示例是一个快速练习，用于说明默认的静态导航栏和固定到顶部的导航栏是如何工作的。它包括响应性CSS和HTML，因此它也适用于您的视口和设备
您是否尝试过使用如下所示的自定义类重新调整“.navbar nav>.active>a:focus”或允许您使用“！important”尝试一下

例如：.custome class.navbar nav>.active>a:focus

问候,，
Sijo Jose

那么在你的URL中，你给出了一个十六进制颜色代码，你想用它作为背景？或者，当URL中存在
。/../components/***#navbar**
时，您希望具有某种样式？尝试了十六进制颜色，没有更改；但是，值得一试——谢谢。不确定“或者当.././components/***#navbar**存在于URL中时，您想要某种样式”的意思。不，我试图理解您想要什么-还没有告诉您尝试任何东西。如果您知道用户在使用时，您只需添加