начальная загрузка 4 навигация активная ссылка цвет

Question

Я хотел бы изменить цвет ссылок активного меню на зеленый.Я пробовал разные способы (глядя на режим разработки, какие правила применяются из фреймворка), но это не сработало.Подскажите, пожалуйста, как поступить?Я использую 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, удаляются из тела

.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}

Один из моих друзей советовал использовать класс .active в CSS, но это тоже не сработало:

    .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

Answer 1

Вы можете добавить active к li.nav-item только для веб-страницы и html-файла, в котором вы сейчас находитесь, например, <li class="nav-item active">

В CSS используйте .active a и стиль с обычной активной ссылкойтакие стили .active a { color: black; }

Вы можете добавить эффект при наведении курсора на последний элемент класса в теге nav, например, так: .sticky-top a:hover { color: black; }

Если вы находитесь на домашней странице, эта ссылкадолжен быть выделен только один.Вам нужно было бы перейти к другим html-файлам и к тому же, что и для других тегов li.nav-item.

Answer 2

Вам нужно использовать CSS-селекторы, которые имеют ту же специфичность, что и CSS-селекторы Bootstrap.

.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://www.codeply.com/go/bsS6PogUFQ

Answer 3

Наконец мне удалось решить проблему, но за пределами начальной загрузки.Жаль, что basig bootstrap.js не имеет этой функции, которая автоматически перемещает активное состояние из одного элемента 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' );
});

Answer 4

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>