如何根据我所在的页面突出显示导航栏

Question

我试图根据我所在的页面突出显示导航栏，例如：

到

如您所见，我移动到的页面已突出显示。我怎样才能在代码中做到这一点？

<div class="navbar" id="navbar_welcome">

  <a href="index.php?action=home" class="active"><i class="fas fa-home"></i>&nbspHome</a>

  <a href="index.php?action=home"><i class="fas fa-chart-line"></i>&nbspHistory</a>

  <a href="index.php?action=setting"><i class="fas fa-user"></i>&nbspProfile</a>

</div>

Answer 1

使用您的 $_GET 变量background-style在页面生成时回显内联属性。<div class="navbar" id="navbar_welcome">&nbsp; <a href="index.php?action=home" class="active">&nbsp; &nbsp; &nbsp;<i class="fas fa-home" <?php if ($_GET['action']=='home') { echo 'style="background-color: grey;"'; }?>></i>&nbspHome&nbsp; </a>&nbsp; <a href="index.php?action=hsitory">&nbsp; &nbsp; &nbsp;<i class="fas fa-chart-line" <?php if ($_GET['action']=='history') { echo 'style="background-color: grey;"'; }?>></i>&nbspHistory&nbsp; </a>&nbsp; <a href="index.php?action=setting">&nbsp; &nbsp; &nbsp;<i class="fas fa-user" <?php if ($_GET['action']=='setting') { echo 'style="background-color: grey;"'; }?>></i>&nbspProfile&nbsp; </a></div>您也可以<style>在标头中的标签中执行类似的操作，或者都可以。

Answer 2

这是非常简单的 HTML 类处理。如果您没有特定的 php 或 ajax 标准。为每个页面添加类active到导航标签。例如：在Page1添加class='active'到当前的 Nav 标签(home.php)<div class="navbar" id="navbar_welcome">&nbsp; <a href="Home.php" class="active"><i class="fas fa-home"></i>&nbspHome</a>&nbsp; <a href="History.php"><i class="fas fa-chart-line"></i>&nbspHistory</a>&nbsp; <a href="Profile.php"><i class="fas fa-user"></i>&nbspProfile</a></div>在Page2添加class='active'到当前的 Nav 标签(History.php)<div class="navbar" id="navbar_welcome">&nbsp; <a href="Home.php"><i class="fas fa-home"></i>&nbspHome</a>&nbsp; <a href="History.php" class="active"><i class="fas fa-chart-line"></i>&nbspHistory</a>&nbsp; <a href="Profile.php"><i class="fas fa-user"></i>&nbspProfile</a></div>active像这样在CSS中添加类.active{&nbsp; background-color: red;}继续对具有相同导航栏的所有页面执行此操作。它应该这样做。参考：https : //learn-the-web.algonquindesign.ca/topics/navigation/