使当前页面的导航菜单按钮突出显示 - Make navigation menu buttons highlighted for the current page

我创建了一个导航菜单，在同一页面上加载不同的"include "。我希望菜单按钮在当前页面保持高亮显示。我在这里看到的所有答案都是针对每个链接导航到不同的页面。有可能在同一页上做这件事吗?因为导航栏不会重载。

 <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';
      }
    }
 ?>

你可以试试:

<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"是用来突出显示菜单的类的名称。

最后，下面的代码为我工作:

<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>

首先，检查当前页面是否等于您的菜单项之一:

<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;
}