使當前頁面的導航菜單按鈕突出顯示

Question

我創建了一個導航菜單，在同一頁面上加載了不同的“包含”。 我希望菜單按鈕在當前頁面上保持突出顯示。 我在這里看到的所有答案僅涉及導航到每個鏈接的不同頁面。 是否可以在同一頁面上執行此操作？ 因為導航欄實際上並未重新加載。

 <nav class="menu">
        <ul>
            <li class="menuitem"><a href="?link=1" name="fluidBalance" <?php echo ($_GET['link'] == 1) ? 'class="highlight"' : ''; ?>>Calculated Fluid Balance</a></li>
            <li class="menuitem"><a href="?link=2" name="actualFluidBalance" <?php echo ($_GET['link'] == 2) ? 'class="highlight"' : '';?>>Actual Fluid Balance</a></li>
            <li class="menuitem"><a href="?link=3" name="graphicalView" <?php echo ($_GET['link'] == 3) ? 'class="highlight"' : ''; ?>>Graphical View</a></li>
        </ul>
</nav>
  <div class="contentFluidBalance" id="mainSection">
<?php

 if(isset($_GET['link'])){
     $link=$_GET['link'];
     if ($link == '1'){
         include 'includes/fluidBalance1.php';
      }
     if ($link == '2'){
         include 'includes/fluidBalance2.php';
      }
    if ($link == '3'){
        include 'includes/fluidBalance5.php';
      }
    }

 ?>

Answer 1

您可以嘗試以下方法：

<nav class="menu">
             <ul>
                 <li class="menuitem"><a href="?link=1" name="fluidBalance" <?php echo ($_GET['link'] == 1) ? 'class="highlight"' : ''; ?>>Calculated Fluid Balance</a></li>
                 <li class="menuitem"><a href="?link=2" name="actualFluidBalance"  <?php echo ($_GET['link'] == 2) ? 'class="highlight"' : '';?>>Actual Fluid Balance</a></li>
                 <li class="menuitem"><a href="?link=3" name="graphicalView"  <?php echo ($_GET['link'] == 3) ? 'class="highlight"' : ''; ?>>Graphical View</a></li>
            </ul>
</nav>

其中class =“ highlight”是突出顯示菜單的類的名稱。

Answer 2

最后，以下代碼對我有用：

<nav class="menu">
 <ul>
   <li<?php if (isset($_GET['link']) && $_GET['link'] == '1') echo 'class="current"'?>><a href="?link=1" <?php if (isset($_GET['link']) && $_GET['link'] == '1') echo ' class="current"'?>" name="fluidBalance">Calculated Fluid Balance</a></li>
   <li<?php if (isset($_GET['link']) && $_GET['link'] == '2') echo ' class="current"'?>><a href="?link=2" <?php if (isset($_GET['link']) && $_GET['link'] == '2') echo ' class="current"'?>" name="actualFluidBalance">Actual Fluid Balance</a></li>
   <li<?php if (isset($_GET['link']) && $_GET['link'] == '3') echo ' class="current"'?>><a href="?link=3" <?php if (isset($_GET['link']) && $_GET['link'] == '3') echo ' class="current"'?>" name="graphicalView">Graphical View</a></li>
</ul>
</nav>

<div class="contentFluidBalance" id="mainSection">
  <?php
     if(isset($_GET['link'])) {
      $link=$_GET['link'];

       if ($link == '1'){
        include 'includes/fluidBalance1.php';
      }
      if ($link == '2'){
        include 'includes/fluidBalance2.php';
      }
      if ($link == '3'){
        include 'includes/fluidBalance5.php';
      }
    }
  ?>
</div>

Answer 3

首先，檢查當前頁面是否等於您的menuitem之一：

<nav class="menu">
  <ul>
    <li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '1') : ?>current<?php endif; ?>"><a href="?link=1" name="fluidBalance">Calculated Fluid Balance</a></li>
    <li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '2') : ?>current<?php endif; ?>"><a href="?link=2" name="actualFluidBalance">Actual Fluid Balance</a></li>
    <li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '3') : ?>current<?php endif; ?>"><a href="?link=3" name="graphicalView">Graphical View</a></li>
  </ul>
</nav>

<div class="contentFluidBalance" id="mainSection">
  <?php
    if(isset($_GET['link'])) {
      $link=$_GET['link'];

      if ($link == '1'){
        include 'includes/fluidBalance1.php';
      }
      if ($link == '2'){
        include 'includes/fluidBalance2.php';
      }
      if ($link == '3'){
        include 'includes/fluidBalance3.php';
      }
    }
  ?>
</div>

然后，在CSS中，對當前類執行任何操作：

.menuitem.current a {
    color:red;
}