更改导航栏选定选项卡的颜色（将其更改为灰色）

Question

<!-- Navbar -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a>
  <ul class="navbar-nav ml-auto">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
  </ul>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <!-- Super Admin Navbar -->
      <?php if($_SESSION['Type']==1){ ?>
        <li class="nav-item active">
        <!--<a class="nav-link" href="<?php //echo base_url('Controller_document'); ?>" style="color:white;">Document</a>-->
          <a class="nav-link" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>Home</strong></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_applicants'); ?>">
            <strong>Students</strong>
            <span id="badge_superadmin" class="badge badge-danger d-none"></span>
          </a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_ranking'); ?>"><strong>Ranking</strong></a>
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <strong>Manage</strong>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="<?php echo base_url('Controller_awardees'); ?>"><strong>Awardees</strong></a>
          </div>
        </li> 
        <li class="nav-item active">
          <a class="nav-link" href="#"><strong>Payments</strong></a>
        </li> 
        <li class="nav-item active">
          <a class="nav-link" href="#"><strong>Reports</strong></a>
        </li> 
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_users'); ?>"><strong>Users</strong></a>
        </li>  
      <?php } ?>
      <!-- Admin Navbar -->
      <?php if($_SESSION['Type']==2){ ?>
        <li class="nav-item active">
        <!--<a class="nav-link" href="<?php //echo base_url('Controller_document'); ?>" style="color:white;">Document</a>-->
          <a class="nav-link" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>Home</strong></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_applicants'); ?>">
            <strong>Students</strong>
            <span  id="badge_admin" class="badge badge-danger d-none"></span>
          </a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_ranking'); ?>"><strong>Ranking</strong></a>
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <strong>Manage</strong>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="<?php echo base_url('Controller_awardees'); ?>"><strong>Awardees</strong></a>
          </div>
        </li> 
        <li class="nav-item active">
          <a class="nav-link" href="#"><strong>Payments</strong></a>
        </li> 
        <li class="nav-item active">
          <a class="nav-link" href="#"><strong>Reports</strong></a>
        </li> 
      <?php } ?>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown active">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <strong><?php echo $_SESSION['Username'] ?></strong>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="<?php echo base_url('Controller_profile'); ?>"><strong>Profile</strong></a>
          <a class="dropdown-item" href="<?php echo base_url('Controller_dashboard/remove_credentials'); ?>"><strong>Logout</strong></a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!-- Navbar -->

考虑以下代码片段，当当前使用的选项卡/模块是当前模块时，如何使其可见？有人请帮助我创建一种更改所选标签的颜色（将其更改为灰色）的方法。提前致谢。***我的代码仍未最终确定，这就是为什么它尚未进行优化的原因。

Answer 1

我不确定我是否完全理解你的问题。 “所选标签/模块”到底是什么意思？一个导航项目？整个导航栏？

通常，操作元素表示的最简单方法是使用PHP或Javascript添加类，例如“ is-active”或sth。对于该类，您可以绑定所需的CSS样式，例如

.is-active {
  color: grey;
  background-color: white;
  …
}

我上面的代码的问题是，几乎所有的

元素都具有“活动”类。那么，“主动”在这种情况下意味着什么？活跃于“被选中”的含义吗？还是只是“不活跃”……？