时间戳

首页 > 解决方案 > Bootstrap导航栏：菜单如何保持标签突出显示？

html - Bootstrap导航栏：菜单如何保持标签突出显示？

问题描述

我开始使用 DW（最新版本），（我使用引导组件：“基本导航栏”插入菜单）但我意识到，只要我点击一个选项卡，它就会为我加载页面，但选项卡不会保留突出显示。

Rem：（“悬停”效果很好）：一旦我将鼠标悬停在选项卡上，颜色就会很好地改变，所以我希望它在选项卡保持活动状态时保持相同的颜色，以便用户知道在哪个找到它的菜单。我发布了代码（由 DW 生成），但我不确定代码中要更改什么？？？在CSS中？令人惊讶的是，这个基本原则默认情况下没有在组件中设置？？在我的 CSS 中，我只有“悬停”部分。

感谢您的建议，因为我已经为这个 pb 苦苦挣扎了好几天（但在我看来，这似乎是一种相当普遍的行为......！！！）

#nav li a:hover {
  background-color: #87CEEB;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div id="nav">
  <ul class="nav nav-pills">
    <li class="nav-item"> <a class="nav-link" href="index.php">Accueil</a></li>
    <li class="nav-item"> <a class="nav-link" href="compotest.php">Assistance</a></li>
    <li class="nav-item"> <a class="nav-link" href="evenementsVU.html">Evènements</a></li>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bulletins</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="bulletin125.htm">Dernier bulletin</a> <a class="dropdown-item" href="collection.php">Bulletins archivés</a>

    </li>
    <li class="nav-item"> <a class="nav-link" href="inscriptionform.php">Adhésion</a> </li>
    <li class="nav-item"> <a class="nav-link" href="contact.php">Contact</a> </li>
    <li class="nav-item"> <a class="nav-link" href="liens.php">Liens</a> </li>
  </ul>
  </div>

标签： htmlcsstwitter-bootstrap

解决方案

您可以将active类用于nav-link. 根据文档，

添加.active类 on.nav-link以指示当前页面。

在这里参考更多

在您的示例中，如果您想要nav-link突出显示“Accueil”，如果用户正在index.php添加activeHTML 中的类，如下所示。

 <li class="nav-item"> 
     <a class="nav-link active" href="index.php">Accueil</a>
 </li>

试试下面的代码片段

#nav li a:hover {
  background-color: #87CEEB;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div id="nav">
  <ul class="nav nav-pills">
    <li class="nav-item"> <a class="nav-link active" href="index.php">Accueil</a></li>
    <li class="nav-item"> <a class="nav-link" href="compotest.php">Assistance</a></li>
    <li class="nav-item"> <a class="nav-link" href="evenementsVU.html">Evènements</a></li>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bulletins</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="bulletin125.htm">Dernier bulletin</a> <a class="dropdown-item" href="collection.php">Bulletins archivés</a>

    </li>
    <li class="nav-item"> <a class="nav-link" href="inscriptionform.php">Adhésion</a> </li>
    <li class="nav-item"> <a class="nav-link" href="contact.php">Contact</a> </li>
    <li class="nav-item"> <a class="nav-link" href="liens.php">Liens</a> </li>
  </ul>
</div>

推荐阅读