突出显示PHP中的当前页面

Question

所以，我正在做一个网站，我使用PHP模板来实现它。我发现了很多关于这方面的教程，但是没有一个提到PHP模板。这是我的导航模板：

</script>
<!--Main Navigation-->
<header>
  <!-- Sidebar -->
  <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-dark">
    <div class="position-sticky">
      <div class="list-group list-group-flush mx-3 mt-4">
        <a
          href="index.php"
          class="list-group-item list-group-item-action py-2 ripple bg-button"
          aria-current="true"
        >
          <i class="fas fa-address-card fa-fw me-3"></i><span>About us</span></a
          >
        <a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button">
          <i class="fas fa-users fa-fw me-3"></i><span>Our team</span></a
          >
        <a href="positions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-laptop-code fa-fw me-3"></i><span>Open positions</span></a
        >
        <a href="associates.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-handshake fa-fw me-3"></i><span>Associates</span></a
        >
        <a href="commissions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-coins fa-fw me-3"></i><span>Commissions</span></a
        >
        <a href="pingernos.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-server fa-fw me-3"></i><span>Pingernos</span></a
        >
        <a href="network.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item-head"
          ><i class="fas fa-network-wired fa-fw me-3"></i><span>Network</span><i class="fas fa-sort-down"></i></a
        >
        <a href="badwolf.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-paw fa-fw me-3"></i><span>Bad Wolf</span></a
        >
        <a href="mg.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
          <i class="fas fa-cubes fa-fw me-3"></i><span>MinecraftGolden</span></a
        >
        <a href="cabin.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-heartbeat fa-fw me-3"></i><span>The Cabin</span></a
        >
        <a href="haven.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-code fa-fw me-3"></i><span>The Haven</span></a
        >
        <a href="credit.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-award fa-fw me-3"></i><span>Credit</span></a
        >
        <a href="legal.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-balance-scale fa-fw me-3"></i><span>Legal</span></a
        >
        <!--
        <a href="#" class="list-group-item list-group-item-action py-2 ripple"
          ><i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a
        > -->
      </div>
    </div>
  </nav>
  <!-- Sidebar -->

  <!-- Navbar -->
  <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Toggle button -->
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        data-toggle="collapse"
        data-mdb-target="#sidebarMenu"
        data-target="#collapseOne"
        aria-controls="sidebarMenu"
        aria-expanded="true"
        aria-label="Toggle navigation"
      >
        <i class="fas fa-bars"></i>
      </button>

    <!-- data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->

      <!-- Brand -->
      <a class="navbar-brand" href="index.php">
        <img
          src="assets/PsychOpsTransparent.png"
          class="navbar-ps"
          height="25"
          alt=""
          loading="lazy"
        />
      </a>
      <!-- Right links -->
      <ul class="navbar-nav ms-auto d-flex flex-row">
        <!-- Icon -->
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="https://github.com/PsychOps" target="_blank">
            <i class="fab fa-github bg-button fa-2x" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
  </nav>
  <!-- Navbar -->
</header>
<!--Main Navigation-->

<!--Main layout-->
<main style="margin-top: 58px;">
  <div class="container pt-4"></div>
</main>
<!--Main layout-->

怎样才能突出显示当前的页面？如果有人知道如何做，请回复，任何建议都会非常感谢。

Answer 1

使用REQUEST_URI或$_SERVER的SCRIPT_NAME键获取当前的网址，文件，并检查它是否与您的链接匹配。

Option1:完全匹配。

首先获取当前URL，文件名。把这段代码放在菜单前。

<?php
$thisFile = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisFile,  PATHINFO_BASENAME);
// $thisFile maybe xxx.php one of your file or URL.
?>

下一次检查你的链接。此示例将使用team.php，使用该方法检查当前URL。

<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisFile, 'team.php') !== false) {echo ' current-menu active';} ?>">

上面的代码将检查当前包含team.php的URL。如果为真，则将添加类current-menu和active。

选项2:子目录中的完全匹配和匹配文件。

如果您的菜单有两个项目使用相同的文件名。然后，示例、team.php、和team.php使用下面的代码。

<?php
$thisUrl = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisUrl ,  PATHINFO_BASENAME);
?>
<!-- exact match file.php -->
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if ('team.php' === $thisFile)) {echo ' current-menu active';} ?>">...</a>

<!-- match /path/file.php -->
<a href="support/team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisUrl, 'support/team.php') !== false) {echo ' current-menu active';} ?>">...</a>

对于这两个选项，您只能选择一个CSS类作为当前活动菜单项(current-menu、active)或使用您自己的菜单项。

添加支持的CSS。

这是关于CSS的。要使您的活动/当前的样式，您必须为他们创建CSS。示例：

.current-menu {
  border-left: 5px solid #blue;
}

看到它的行动