更改活动导航项的颜色并显示相对于导航栏项的页面

Posted 2023-05-08

【中文标题】更改活动导航项的颜色并显示相对于导航栏项的页面

【英文标题】：Changing the color of active nav-item and displays the page relative to the navbar item

【发布时间】：2020-12-17 12:23:14

【问题描述】：

我尝试了很多方法，但无法更改活动导航项的背景颜色，也无法显示相对于导航栏项的页面。

注意： 下面的 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>

【问题讨论】：

在 SO 上看到过几次 - 您正在单击链接，然后 导航到新页面 从而重新创建页面。您需要在页面加载上添加检查以根据当前页面设置aMenuActive/或使用ajax加载页面。

我一定会看看 ajax 是如何工作的，我需要它来改进我的代码。非常感谢。

您需要覆盖 boostrap.min.css 文件中预定义的 css 属性 white。你可以通过Inspect Element找到。

【参考方案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>

【讨论】：

当页面重新加载时，即使通过 css 更改背景颜色，它也会恢复为默认颜色。但是感谢您的回答，我会尝试重组我的代码。我在这个功能上花了很多时间......