用于项目活动状态的 Bootstrap 4 自定义导航栏答案

【问题标题】：Bootstrap 4 Custom NavBar for item active state用于项目活动状态的 Bootstrap 4 自定义导航栏
【发布时间】：2020-08-16 12:04:40
【问题描述】：

我知道如何向页面添加导航栏。但是，我正在与活动状态作斗争。当一个项目处于活动状态（我在那个页面上）或悬停在导航项目上时，应该从项目到 [项目] 也加下划线。所以我需要知道如何添加一个活动和悬停状态，为项目添加下划线并在其周围添加括号。

谢谢。

【问题讨论】：

标签： javascript css bootstrap-4 navigation

【解决方案1】：

虽然你的描述很模糊，但我想我明白你想要做什么。我假设当您单击导航栏按钮时，您会移动到不同的页面。

如果您希望“导航项”显示为活动状态，您只需为其指定“活动”类

<li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

在将 item 更改为 [item] 的情况下，您可以使用 CSS：

.example:before {
    content: "item";
}

.example:hover:before {
    content: "[item]";
}

虽然使用此方法确实要求链接中没有文本，否则您最终会显示“item[item]”。

我希望这会有所帮助。要了解有关引导导航栏的更多信息，请查看此处：https://getbootstrap.com/docs/4.0/components/navbar/

【讨论】：

【解决方案2】：

感谢您的提问，欢迎加入社区。今后，请分享您提出的一些代码，以便其他人可以使用它来学习:)。

关于您的问题，只需使用 CSS 中的活动类来更改导航项的状态。

要真正检测您所在的页面需要使用语言。您可以使用 PHP，请参阅此现有帖子 How to set current page "active" in php

希望对你有帮助

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

CSS

.nav-item {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Style the active class (and on mouse-over) */
.active, .nav-item:hover {
  background-color: #666;
  color: white;
}

【讨论】：