Question

我已经写了一些代码，这些代码将基于class="active"突出显示标题中的链接。该类已连接到一些CSS代码以对其进行样式设置。

我当前正在为每个页面添加class="active"指定的链接。但是，由于我想将标题移动到它自己的文件中并将其包含在每个页面中，因此我将失去为每个页面设置类的能力。我当然可以添加一个变量，让我可以做同样的事情。

我想知道的是，是否存在一种更好且安全的方法来自动将class="active"设置到我所在的页面。我已经看到一些建议使用的帖子：($_SERVER['PHP_SELF']，但我已经读到它可能会引起一些安全问题。

最后，我遇到的主要问题是我需要设置两个链接 class="active"（如果我正在查看项目组合列表项中的页面）。例如，如果当前正在查看games.html，则游戏和投资组合页面都应具有以下代码：class="active"。

（我所有的.html文件都读为.php） 这是到目前为止的html代码：

<ul>
    <li><a href="/">Home</a></li>
    <li><a class="active" href="portfolio.html">Portfolio</a>
        <ul>
            <li><a class="active" href="games.html">Games</a></li>
            <li><a href="2d-art.html">2D Art</a></li>
            <li><a href="3d-models.html">3D Models</a></li>
            <li><a href="particles.html">Particles</a></li>
            <li><a href="shaders.html">Shaders</a></li>
            <li><a href="environments.html">Environments</a></li>
            <li><a href="programming.html">Programming</a></li>
            <li><a href="substance-designer.html">Substance Designer</a></li>
            <li><a href="music.html">Music</a></li>
        </ul>
    </li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
    <li><a href="/store.html">Store</a></li>
</ul>

任何帮助将不胜感激！

Answer 1

PHP_SELF是安全的，当您仅将其用于比较值并且不直接在html中使用它时：

可以通过将所有相关页面嵌套在名为portfolio的文件夹中并检查路径是否以该文件夹开头来激活组合菜单。

<?php
$currentPage = $_SERVER['PHP_SELF'];
$portfolioFolder = 'portfolio/';

$isPortfolioFolder = substr($currentPage, 0, strlen($portfolioFolder)) == $portfolioFolder);
?>

<ul>
    <li><a href="/">Home</a></li>
    <li><a class="<?= $isPortfolioPage ? 'active' : '' ?>" href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="games.html" class="<?= $currentPage === 'games.html' ? 'active' : '' ?>">Games</a></li>
            <li><a href="2d-art.html" class="<?= $currentPage === '2d-art.html' ? 'active' : '' ?>">2D Art</a></li>
            <li><a href="3d-models.html">3D Models</a></li>
            <li><a href="particles.html">Particles</a></li>
            <li><a href="shaders.html">Shaders</a></li>
            <li><a href="environments.html">Environments</a></li>
            <li><a href="programming.html">Programming</a></li>
            <li><a href="substance-designer.html">Substance Designer</a></li>
            <li><a href="music.html">Music</a></li>
        </ul>
    </li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
    <li><a href="/store.html">Store</a></li>
</ul>

使用包括在页面上设置活动链接

1 个答案: