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

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

  <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>在标头中的标签中执行类似的操作，或者都可以。

Answer 2

这是非常简单的 HTML 类处理。如果您没有特定的 php 或 ajax 标准。为每个页面添加类active到导航标签。

例如：

在Page1添加class='active'到当前的 Nav 标签(home.php)

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

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

  <a href="History.php"><i class="fas fa-chart-line"></i>&nbspHistory</a>

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

  <a href="Home.php"><i class="fas fa-home"></i>&nbspHome</a>

  <a href="History.php" class="active"><i class="fas fa-chart-line"></i>&nbspHistory</a>

  <a href="Profile.php"><i class="fas fa-user"></i>&nbspProfile</a>

</div>

active像这样在CSS中添加类

.active{

  background-color: red;

}

继续对具有相同导航栏的所有页面执行此操作。它应该这样做。

参考：https : //learn-the-web.algonquindesign.ca/topics/navigation/