为当前页面突出显示导航菜单按钮

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

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

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