Question

我的问题很简单，并且一段时间以来，我一直在尝试解决此问题的方法。本质上，我有一个免费的HTML模板，已下载。整个模板仅使用html，这意味着如果我更改标题中的内容，则必须浏览10页并更改标题的HTML代码。因此，我的解决方案是删除标头html代码，并放置一个名为header.php的文件，然后在所有页面上回显该文件。

但是，出现问题。如您所见，第一行显示<li class="nav-item active">。有一个active位。因此，无论我们当前在哪个页面上，我们都必须在nav-item旁边添加活动页面。然后进一步复杂化...如果您有一个下拉菜单，则class=看起来有所不同。如果您位于下拉菜单中的页面上，例如<li class="nav-item submenu dropdown active">

所以我的问题是，如何才能检测到我所在的页面，并确保将active放在正确的位置？

当我们在index.html上

<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
<li class="nav-item submenu dropdown">
    <a class="nav-link" href="#">Portfolio</a>
    <ul class="dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="portfolio-det.html">Portrfolio Dets</a>
    </ul>
</li>

当我们在portfolio-det.html上时，投资组合的一个子部分。（查看第3行，您会看到active）

<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
<li class="nav-item submenu dropdown active">
    <a class="nav-link" href="#">Portfolio</a>
    <ul class="dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="portfolio-det.html">Portrfolio Dets</a>
    </ul>
</li>

如您所见

Answer 1

看看这可能对您有帮助。

因此，首先需要获取URL，然后将URL与正确的ID匹配，以使激活的菜单变为活动状态

<?php 

$get_url = $_SERVER['REQUEST_URI'];


?>


 <script>
    $("#" + '<?php echo $get_url ?>').addClass('active');
 </script>

但是由于您的网址中包含.html，因此我们希望将其删除

$get_url = str_replace(".html", "", $_SERVER['REQUEST_URI']);

所以一旦有了，您需要在HTML中添加ID

<li id="about-us" class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>

如果您在“ portfolio.html”页面上，它应该会亮起

希望这有帮助，或者我至少正确地理解了您的问题

Answer 2

如果您正在考虑使用JavaScript，请尝试使用location.pathname检测当前链接，然后遍历所有父级，并为具有{的节点添加active类{1}}类。

以下解决方案应该可以完成工作。

nav-item

Answer 3

我在代码下方添加了如何使用$ _SERVER ['REQUEST_URI']的方法，该方法应该可以正常使用。 if条件检查名称索引是否在您的url内。希望对您有所帮助（这不是最佳解决方案，但它向您展示了如何将其用于特定问题）。

<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
        <h1>Index PHP</h1>
        <?php
           include 'menu.php';
        ?>
    </body>
    </html>

这是Second.php页面。

  <!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
        <h1>Second PHP</h1>
        <?php
         include 'menu.php';
         echo "Second page!";
        ?>
     </body>
  </html>

这是您要包含的menu.php。

<?php 
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];


if (strpos($url,'index') !== false) {
    echo '<li class="nav-item active"><a class="nav-link" href="index.php">First page</a></li>
    <li class="nav-item "><a class="nav-link" href="second.php">Second Page</a></li> ';
} else {
    echo ' <li class="nav-item"><a class="nav-link" href="index.php">First page</a></li>
    <li class="nav-item active"><a class="nav-link" href="second.php">Second Page</a></li>';
}

?> 

<style>
    .active{
        background-color: green;
    }
</style>

Answer 4

您尚未在问题中定义非常重要的部分-如何“回显” header.php文件？

OP：整个模板仅在 html 中

我问您这个问题，因为通常您不能只是在.html文件中添加PHP代码并期望它运行。

我假设您使用标准的include / require函数，并且仍在服务器上运行html模板，对吗？

假设，您只需要在* .html文件中定义一个活动页面变量，为每个文件设置一个不同的值，然后在header.php中检查所请求的页面是什么。您也可以使用该变量的值来调整标题中的其他内容。

我假设这个目录结构是

root
|_ index.html
|_ about-us.html
|_ portfolio.html
|_ portfolio-det.html
|_ header.php

步骤1：将所有.html文件重命名为.php文件扩展名：

我假设这个目录结构是

root
|_ index.php
|_ about-us.php
|_ portfolio.php
|_ portfolio-det.php
|_ header.php

第2步：替换从.html到.php的导航链接中的所有内部引用（请仔细检查所有内容！）

第3步：：定义$ page变量，该变量将保存关键字所在的模板。示例代码（经过测试）如下：

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>INDEX</title>
    </head>
    <body>
        <?php
        $page = 'home';
        require_once('header.php');
        ?>
        <div>INDEX</div>
    </body>
</html>

portfolio.php

<!DOCTYPE html>
<html>
    <head>
        <title>PORTFOLIO</title>
    </head>
    <body>
        <?php
        $page = 'portfolio';
        require_once('header.php');
        ?>
        <div>PORTFOLIO</div>
    </body>
</html>

portfolio-det.php

<!DOCTYPE html>
<html>
    <head>
        <title>PORTFOLIO-DET</title>
    </head>
    <body>
        <?php
        $page = 'portfolio';
        require_once('header.php');
        ?>
        <div>PORTFOLIO-DET</div>
    </body>
</html>

header.php

<li class="nav-item <?php if($page == 'home') { echo 'active'; } ?>"><a class="nav-link" href="index.php">Home</a></li>
<li class="nav-item <?php if($page == 'about-us') { echo 'active'; } ?>"><a class="nav-link" href="about-us.php">About</a></li>
<li class="nav-item submenu dropdown <?php if($page == 'portfolio') { echo 'active'; } ?>">
    <a class="nav-link" href="#">Portfolio</a>
    <ul class="dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="portfolio.php">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="portfolio-det.php">Portrfolio Dets</a>
    </ul>
</li>

如何确定哪个页面处于活动状态/我们在php中

4 个答案: