在页面更改 php 上更新 Header 链接类

Question

我正在尝试制作一个动态标题，其中标题链接类在页面更改时自动更新。因此，例如，如果用户在索引中，则标题上的 HOME 显示为红色，如果他在作品集页面上，则作品集显示为红色，依此类推。我的代码。<?phpswitch(basename($_SERVER['PHP_SELF'])){    case "index.php":        $index_hover = "act-link";    break;    case "portfolio.php":        $folio_hover = "act-link";    break;}?><style>.act-link {color: red}</style><div class="nav-holder">   <a href="index.php" class="<?php echo $index_hover; ?>">Home</a>   <a href="portfolio.php" class="<?php echo $folio_hover; ?>">Folio</a></div>此代码按预期工作，但问题说我在标题中有 30 个链接，那么它不方便。所以我想让它动态化，以便它检测页面并根据需要进行更新。

Answer 1

根据您的问题，我认为您想在与页面关联的导航菜单中添加自定义类

您也可以使用 php 和 javascript 来完成

使用 PHP

<?php

function addActiveClass($page){

  $url_array =  explode('/', $_SERVER['REQUEST_URI']) ;

  $url = end($url_array);  

  if($page == $url){

      echo 'act-link'; //class name in css 

  } 

}

?>

 <ul>

    <li><a class="<?php addActiveClass('home.php');?>" href="http://localhost/Home.php">Home</a></li>

    <li><a class="<?php addActiveClass('aboutus.php');?>" href="http://localhost/aboutus.php">About us</a></li>

    <li><a class="<?php addActiveClass('contactus.php');?>" href="http://localhost/contactus.php">Contact us</a></li>

</ul>

在这里，我在每个锚标记 addActiveClass 上添加了函数，它根据传递的参数添加类“act-link”

使用 javascript(jquery)

$(document).ready(function() {

    var pathname = window.location.pathname;

    $('ul > li > a[href="'+pathname+'"]').parent().addClass('act-link');

})

<ul class="nav">

    <li><a href="/home.php">Home</a></li>

    <li><a href="/aboutus.php">About us</a></li>

    <li><a href="/contactus.php">Contact us</a></li>

</ul>

如果您愿意，我在这里使用了 jquery，您也可以编写代码是核心 js

让我知道是否有混淆