изменить цвет (изменить его на серый) выбранной вкладки панели навигации

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" et c. К этому классу вы привязываете желаемые CSS -тили, такие как

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

Моя проблема с приведенным выше кодом состоит в том, что почти все элементы списка имеют "активный" -класс. Так что же означает «активный» в этом контексте? Активен в значении «быть избранным»? Или просто быть "неактивным" ...?