Изменение цвета активного навигационного элемента и отображение страницы относительно элемента навигационной панели

#jquery #css #node.js #bootstrap-4 #ejs

Вопрос:

Я много чего перепробовал, но не могу изменить цвет фона активного навигационного элемента, а также отобразить страницу относительно элемента навигационной панели.

Примечание: Приведенный ниже код jQuery изменяет цвет фона элемента списка панели навигации, но в тот момент, когда я нажимаю на страницу, он возвращается к цвету по умолчанию. Если я добавлю ‘e.preventDefault()’, он правильно изменит цвет фона элемента навигации, но не отобразит страницу относительно элемента панели навигации.

HTML (файл EJS)

  <div class="navbar-nav">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 4</a>
        </li>
    </ul>
</div>

CSS

 .navbar-nav > .aMenuActive {
    background-color: var(--main-pink-color);
}

jQuery

 // aMenuActive -> Add class to clicked li
$('ul.navbar-nav > li').click(function (e) {    
    console.log("log...clicked menu",);
    $('ul.navbar-nav > li').removeClass('aMenuActive');
    $(this).addClass('aMenuActive');
    //e.preventDefault(); // -> works but does not send to link
});

 $('ul.navbar-nav > li').click(function (e) {    
    console.log("log...clicked menu",);
    $('ul.navbar-nav > li').removeClass('aMenuActive');
    $(this).addClass('aMenuActive');
    //e.preventDefault(); // -> works but does not send to link
});

 .navbar-nav > .aMenuActive {
    background-color: red;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-nav">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Item 4</a>
        </li>
    </ul>
</div>

1. Видел это несколько раз на SO — вы нажимаете на ссылку, которая затем переходит на новую страницу , таким образом воссоздавая страницу. Вам нужно добавить проверку загрузки страницы, чтобы установить aMenuActive на основе текущей страницы / или загрузить страницу с помощью ajax.

2. Я обязательно посмотрю, как работает ajax, мне это понадобится для улучшения моего кода. Большое спасибо.

3. Вам нужно перезаписать свойство css white, которое предварительно определено в файле boostrap.min.css . Вы можете найти через элемент проверки .

4. @danielbcarvalho удалось ли вам устранить эту проблему?

Ответ №1:

href вызовет перезагрузку страницы и потерю выделения.

Вы можете изменить цвет фона просто с помощью css.

 .navbar-nav > .nav-item:focus-within {
  background-color: pink; //var(--main-pink-color);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-nav">
  <ul class="navbar-nav">
      <li class="nav-item">
          <a class="nav-link px-auto px-lg-2 px-xl-3" href="/index/2">Item 1</a>
      </li>
      <li class="nav-item">
          <a class="nav-link px-auto px-lg-2 px-xl-3 " href="/index/viagens">VIAGENS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link px-auto px-lg-2 px-xl-3" href="/index/3">Item 2</a>
      </li>
      <li class="nav-item">
          <a class="nav-link px-auto px-lg-2 px-xl-3" href="/index/4">Item 3</a>
      </li>
  </ul>
</div>

1. При перезагрузке страницы она возвращается к цвету по умолчанию, даже изменяя цвет фона с помощью css. Но спасибо за ответ, я попытаюсь реструктурировать свой код. Я потратил много времени на эту функцию…