bootstrap 4 导航活动链接颜色

问题描述 投票：0回答：6

我想将活动菜单链接的颜色更改为绿色。我尝试了各种方法（查看开发者模式从框架应用了哪些规则），但它不起作用。您能告诉我如何进行吗？我正在使用 Bootstrap 4 和 mdbootstrap。

HTML 代码：

  <nav class="navbar navbar-expand-md navbar-light sticky-top">

    <div id="navcontainer" class="d-flex container py-2 justify-content-center align-items-center">

<!-- Logo+Nev -->
      <div id="nevtitulus" class="d-flex align-items-start mr-lg-5 mr-md-3">
        <div>
          <img id="logo" class="mr-lg-3 mr-2" src="images/DRLJ_logo.png" alt="logo">
        </div>
        <!--logo-->
          <div class="text-center">
            <span id="logoname">Dr. Langmár Judit</span>
            <!-- hide on screens smaller than md -->
            <p id="logodesc" class="d-none d-md-block">Akupunktőr, üzemorvos, orthopaed szakorvos</p>
            <!-- hide on screens wider than sm -->
            <p id="logodesc2" class="d-md-none">Akupunktőr, üzemorvos, <br> orthopaed szakorvos</p>
          </div>
          <!--Nev+titulus-->
      </div> <!--logo+nev container-->

    <div id="hamburger-wrapper" class="ml-5 ml-md-0">

      <div id="button-wrapper" class="d-flex szelesseg justify-content-center">
<!-- hamburger menu -->
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#navcollapse" aria-controls="navcollapse"
            aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
      </div>
<!-- collapse navbar -->
        <div class="collapse navbar-collapse" id="navcollapse">
          <ul class="nav navbar-nav text-center">
            <li class="nav-item"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
            <li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
            <li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
            <li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
            <li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
          </ul>
        </div>
        <!-- collapse navbar -->
      </div>
      <!--hamburger-wrapper-->
    </div>
    <!--Navcontainer-->
    </nav>

到目前为止我已经尝试过的 CSS 技巧，但没有成功（只有悬停有效）：

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: rgb(129, 91, 73);
background-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-nav .nav-item .nav-link:focus {
  color: #0DB159;
}

.navbar-light .navbar-nav .nav-item:active .nav-link {
  color: #0DB159;
}

#navcollapse a:active {
    color: #0DB159;
}

下面这个有效，但前提是导航所引用的锚标记已从正文中删除

.nav.navbar-nav .nav-item .nav-link:focus {
  color: #0DB159
}

我也尝试过这些，但直到锚标签位于正文中才起作用......

.nav.navbar-nav .nav-item .nav-link:focus,
.nav.navbar-nav .nav-item:focus,
.nav.navbar-nav .nav-item a:focus,
.nav.navbar-nav .nav-item .nav-link a:focus,
.nav.navbar-nav .nav-item .nav-link:active,
.nav.navbar-nav .nav-item:active,
.nav.navbar-nav .nav-item a:active,
.nav.navbar-nav .nav-item .nav-link a:active {
  color: #1c8a66}

我的朋友建议在 CSS 中使用 .active 类，但这也不起作用：

    .nav.navbar-nav .nav-item .nav-link.active {
      color: #1c8a66
   }

HTML 中的锚点：

<a class="anchor" id="kezelesek"></a>

CSS 中的锚定类

a.anchor {
    display: block;
    position: relative;
    top: -57px;
    visibility: hidden;
}

在这里您可以看到问题：如果相应的锚标记存在，菜单不会改变颜色：

https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY

css bootstrap-4 navigationbar
6个回答
8
投票

您需要使用与 Bootstrap CSS 选择器具有相同特异性的 CSS 选择器。

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
    color: #00B159;
}

演示：https://codeply.com/go/bsS6PogUFQ

1
投票

您可以仅针对当前所在的网页和 html 文件将 

active
添加到 
li.nav-item
，如下所示 
<li class="nav-item active">

在 CSS 中使用 

.active a
并使用传统的活动链接样式进行样式设置，如下所示 
.active a { color: black; }

您可以通过定位导航标签中的最后一个类元素来添加悬停效果，如下所示 

.sticky-top a:hover { color: black; }

如果您在主页上，则该链接应该是唯一突出显示的链接。您需要转到其他 html 文件，并对其他 

li.nav-item
标签进行同样的操作。

1
投票

我很感激我迟到了回答这个问题。然而，在自己寻找这个问题的答案后，我偶然发现了一个对我有用的答案。

简而言之，我意识到通过添加“active”作为指向自身的链接（活动页面，或指向我正在编辑的页面的链接）的类，可以实现所需的效果。例如，如果我在主页上单击 Active Page Link，我将转到 active_page.html。在该页面的 html 文件中，我需要使用以下内容更新 html：

<a class="nav-link active" href="../static/active_page.html">Active Page</a>

换句话说，只需将“active”添加到链接指向自身的锚类（我希望这是有道理的）。换句话说，对于每个链接都有一个 .html 页面，并且对于指向该链接所在页面的每个链接，将“active”添加到标签类（如上所述）。

为了进一步细化，如果您想控制活动链接的颜色，请检查元素以查找所应用颜色的 css 行并更改 css 文件。

0
投票
li.selected a { color: #0DB159; }

HTML

<ul class="nav navbar-nav text-center">
            <li class="nav-item selected"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
            <li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
            <li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
            <li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
            <li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
</ul>
0
投票

最后我设法解决了这个问题，但是在引导程序之外。遗憾的是basig bootstrap.js没有这个自动将活动状态从一个nav元素移动到另一个nav元素的功能...

我最后使用了这个 JS 解决方案来突出显示活动导航菜单：

https://codepen.io/gearmobile/pen/bByZdG

$( '#topheader .navbar-nav a' ).on( 'click', function () {
$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
0
投票

只要您的 Bootstrap 版本为 5.2.0 或更高版本，您就可以使用 CSS 变量。

相关文档

<nav class="navbar navbar-expand-lg" style="--bs-navbar-active-color: rgb(var(--bs-link-color-rgb))">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.