如何实现网站全局导航菜单并动态设置active类（PHP方案）

Problem Context #

You were stuck with the tedious task of updating navigation menus on every single page manually, and plain HTML embeds couldn't handle highlighting the active current page. Your PHP solution fixes both issues perfectly—great work implementing a DRY (Don't Repeat Yourself) approach!

Working Implementation #

Step 1: Create the Reusable Navigation File (navigation.php)

This file holds your full navigation structure, with PHP logic to dynamically add the active class to the current page's link:

<ul class="navigation">
 <li><a href="SampleCard.html" <?php if($currentPage == 'SampleCard'){echo 'class="active"';}?>>
 <div>FREE Yarn<br>Sample Card</div>
 </a></li>
 <li><a href="index.html" <?php if($currentPage == 'index'){echo 'class="active"';}?>>
 <div>Home</div>
 </a></li>
 <li><a href="SpinningFibre.html" <?php if($currentPage == 'SpinningFibre'){echo 'class="active"';}?>>
 <div>Spinning<br>Fibre</div>
 </a></li>
 <li><a href="MillSpun.html" <?php if($currentPage == 'MillSpun'){echo 'class="active"';}?>>
 <div>Mill Spun<br>Yarn</div>
 </a></li>
 <li><a href="HandSpun.html" <?php if($currentPage == 'HandSpun'){echo 'class="active"';}?>>
 <div>Hand Spun<br>Yarn</div>
 </a></li>
 <li><a href="Books.html" <?php if($currentPage == 'Books'){echo 'class="active"';}?>>
 <div>Books</div>
 </a></li>
 <li><a href="WhyBuy.html" <?php if($currentPage == 'WhyBuy'){echo 'class="active"';}?>>
 <div>Why Buy<br>Rare Breeds?</div>
 </a></li>
 <li><a href="AboutUs.html" <?php if($currentPage == 'AboutUs'){echo 'class="active"';}?>>
 <div>About Us</div>
 </a></li>
 <li><a href="ContactUs.html" <?php if($currentPage == 'ContactUs'){echo 'class="active"';}?>>
 <div>Contact Us</div>
 </a></li>
 <li><a href="PostagePrice.html" <?php if($currentPage == 'PostagePrice'){echo 'class="active"';}?>>
 <div>Postage<br>Prices</div>
 </a></li>
</ul>

Step 2: Include the Navigation in Each Page

On every page that needs the navigation, define the $currentPage variable to match the page's identifier, then include the navigation.php file. For example, on the Spinning Fibre page:

<body>
 <?php 
 $currentPage = 'SpinningFibre'; 
 include 'navigation.php'; 
 ?>
 <!-- Rest of your page content goes here -->
</body>

Optional Optimization: Auto-Detect the Current Page #

To skip manually setting $currentPage on every page, you can use PHP's $_SERVER superglobal to automatically extract the current page name. Update navigation.php like this:

<?php
// Get the current page filename without the .html extension
$currentPage = basename($_SERVER['PHP_SELF'], '.html');
?>
<ul class="navigation">
 <li><a href="SampleCard.html" <?php if($currentPage == 'SampleCard'){echo 'class="active"';}?>>
 <div>FREE Yarn<br>Sample Card</div>
 </a></li>
 <!-- All other navigation items stay the same -->
</ul>

Now you can include the navigation with zero extra setup on each page:

<body>
 <?php include 'navigation.php'; ?>
 <!-- Rest of your page content goes here -->
</body>

This makes your setup even more maintainable—you won't have to remember to update the $currentPage variable if you rename a page later on.

内容的提问来源于stack exchange，提问作者Jonathon Philip Chambers