时间戳

首页 > 解决方案 > 用于项目活动状态的 Bootstrap 4 自定义导航栏

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

问题描述

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

谢谢。

标签： javascriptcssbootstrap-4navigation

解决方案

尽管您的描述很模糊，但我想我了解您要做什么。我假设当您单击导航栏按钮时，您将移动到不同的页面。

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

<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/

推荐阅读