个人中心
gpt4 book ai didi

css - 在 Bootstrap 3 导航栏链接上保留事件类

转载 作者：行者123 更新时间：2023-11-28 03:19:37 24 4
gpt4 key购买 nike

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

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

如果我对 URL 使用井号 (#) 而不是背景颜色更改我想要的方式，我推测是因为页面没有重新加载。

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

下面的 CSS 足以完成 Wordpress Bootstrap Navs 的工作，但 active 类是由 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>

最佳答案

您是否尝试过使用您自己的自定义类来调整“.navbar-nav>.active>a:focus”，如下所示，或者如果您被允许使用“!important”，请尝试使用它。

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

问候，西约何塞

关于css - 在 Bootstrap 3 导航栏链接上保留事件类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45274503/

24 4 0
文章推荐： html - 从水平 View 移动到垂直 View 时，iPhone 菜单图标重复
文章推荐： javascript - 为段落的每个换行符添加跨度
文章推荐： javascript - 为什么会出现 Uncaught TypeError : Cannot read property 'dataSource' of undefined
文章推荐： html - 在表单中对齐三个按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com