Question

到目前为止，我网站上的每个页面都有相同的导航菜单，并且工作正常。（我只是为持怀疑态度的读者复制它，但它只是一个正常的导航菜单，工作正常。）

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

请注意，此特定页面是＆＃34; Spinning Fiber＆＃34;所以＆＃34; SpinningFibre.html＆＃34;有＆＃34;活跃＆＃34;类。（这在以后变得很重要。）

这项技术的最大缺点是，每次我想要更改导航菜单时，我都需要将相同的更改复制并粘贴到每个...单...页面...我......有。 ..制作。

我看到了一种允许我将一个html文件嵌入另一个html文件的技术。例如：

<div w3-include-html="navigation.html"></div>

我渴望尝试一下，因为它会使我对导航的未来编辑变得更加容易。但是，如何让CSS知道哪个链接是活动链接，因此它可以相应地格式化？

我学到了很多PHP，所以欢迎任何需要PHP代码的解决方案。

编辑下方： （这是一个正式答案，但我认为这是我应该发布结果的方式）

亚当的回答虽然肯定是钱，却永远不会像书面说的那样完成。尽管如此，我还是能够看到隐藏在下面的黄金的错别字。但是，任何未来的读者都可能无法查看，所以这里是问题中发布的导航代码的完整工作版本。

（我也使用过回声，但这只是因为我更熟悉如何使用回声，以及它的局限性，而不是我对亚当的方法。）

文件名＆＃34; navigation.php＆＃34;：

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

您不需要查看我的标题（仍需要整理），但只要正文标签打开就会显示如下（此示例为“旋转光纤”页面）：

<body>
    <?php 
        $currentPage = 'SpinningFibre';
        include 'navigation.php';
    ?>

这真的很有效。谢谢亚当。

（现在我对所有标题使用相同的方法。）

Answer 1

由于您提到您正在使用PHP，因此可以将菜单移动到文件“menu.php”

然后，您将需要将文件的扩展名从“.html”更改为“.php”（以便服务器可以执行以下代码）：

<?php require_once 'menu.php'; ?>

这段代码会进入你想要的菜单中的所有文件。

根据“活动状态”，有几种方法可以实现这一点，其中一个基本且最简单的方法是在每个页面的顶部创建一个变量（在require_once之前）：

<?php $currentPage = 'Sample Card'; ?>

然后在菜单中，您可以使用一些逻辑来读取变量，然后为菜单项指定一个“活动”类。

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

这部分：

<?php if ($currentPage == 'Sample Card'){ ?> class="active" <?php } ?>

可以添加到任何菜单项，只需更改$currentPage == ''即可匹配您在页面顶部设置的变量。

Answer 2