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

Question

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

Page I am currently in

到

The next page I am in

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

<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">
  <a href="index.php?action=home" class="active">
     <i class="fas fa-home" <?php if ($_GET['action']=='home') { echo 'style="background-color: grey;"'; }?>></i>&nbspHome
  </a>
  <a href="index.php?action=hsitory">
     <i class="fas fa-chart-line" <?php if ($_GET['action']=='history') { echo 'style="background-color: grey;"'; }?>></i>&nbspHistory
  </a>
  <a href="index.php?action=setting">
     <i class="fas fa-user" <?php if ($_GET['action']=='setting') { echo 'style="background-color: grey;"'; }?>></i>&nbspProfile
  </a>
</div>

您也可以在 <style> 中做类似的事情 header 中的标签，两者都有效。