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

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

php html css

如何确定php中的哪个页面处于活动状态/我们在哪个页面上,php,html,css,Php,Html,Css,我的问题很简单，我一直在想办法解决这个问题。基本上，我下载了一个免费的HTML模板。整个模板都是html格式的，这意味着如果我更改了标题中的某些内容，我必须浏览10页并更改标题的html代码。因此，我的解决方案是删除标题html代码并放置一个名为header.php的文件，然后在所有页面上重复它然而，有一个问题。如您所见，第一行显示。有一个活动的位。因此，无论我们当前在哪个页面上，我们都必须在nav item旁边设置active。然后让事情变得更复杂。。。如果您有一个下拉菜单，class=看起

我的问题很简单，我一直在想办法解决这个问题。基本上，我下载了一个免费的HTML模板。整个模板都是html格式的，这意味着如果我更改了标题中的某些内容，我必须浏览10页并更改标题的html代码。因此，我的解决方案是删除标题html代码并放置一个名为

header.php的文件，然后在所有页面上重复它
然而，有一个问题。如您所见，第一行显示
。有一个活动的位。因此，无论我们当前在哪个页面上，我们都必须在nav item
旁边设置active。然后让事情变得更复杂。。。如果您有一个下拉菜单，class=
看起来有所不同。如果您所处的页面位于这样的下拉菜单上

所以我的问题是，我如何检测我在哪个页面上，并确保将活动的位放在正确的部分

当我们在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>

正如您所看到的，看看这个，它可能会对您有所帮助
因此，首先需要获取URL，然后将URL与适当的ID匹配，以使您激活的菜单成为活动菜单
<?php 

$get_url = $_SERVER['REQUEST_URI'];


?>


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

因此，一旦我们有了，您需要添加id到您的HTML
<li id="about-us" class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>



如果你在“portfolio.html”页面上，它应该亮起
希望这有帮助，或者我至少正确理解了您的问题如果您正在考虑使用JavaScript，请尝试使用location.pathname
检测当前链接，然后检查所有父节点并为具有nav item
类的节点添加active
类
下面的解决方案应该可以完成这项工作
var url = location.pathname.substr(1), // remove trailing slash
link = document.querySelector('.nav-link[href$="' + url + '"]');

if (link) {
    var item = link.parentNode;
    while (item.className && (item.nodeName === 'UL' || item.nodeName === 'LI')) {
        if (item.className.indexOf('nav-item') > -1) {
            item.className += ' active';
        }
        item = item.parentNode;
    }
}

我在下面的代码中添加了如何使用$\u SERVER['REQUEST\u URI']，这个方法应该可以很好地工作。if条件检查名称索引是否在您的url中。我希望我能帮助您（这不是一个最佳解决方案，但它向您展示了如何使用它解决您的特定问题）

索引PHP

这是第二个.php页面
  <!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
        <h1>Second PHP</h1>
        <?php
         include 'menu.php';
         echo "Second page!";
        ?>
     </body>
  </html>


第二个PHP

这是您想要包含的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>


.主动{
背景颜色：绿色；
}
您的问题中没有定义非常重要的部分-如何“回显”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

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

步骤1:将所有.html文件重命名为.php文件扩展名：
我假设这个目录结构：
root
|_ index.html
|_ about-us.html
|_ portfolio.html
|_ portfolio-det.html
|_ header.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>

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

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

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


指数
指数

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

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

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

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


文件夹
文件夹

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

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

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

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


投资组合-DET
投资组合-DET

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

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

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

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

看看@Nick如果我在header.php
中使用它来计算活动位的放置位置，它只会返回header.php
的目录？@Yuri如果在每个文件中包含header.php
，则会得到文件的URL，而不是header.php
@digijay，而不是重复的。我不想在'header.php'中获取url。我想得到header.php的目录。我想在页面上显示@Yuri，它应该是
或
但它不是一个ID。活跃的学生在班上。那么，如何确定将激活的string@Yuri这就是想法，你把ID作为目标，把ID命名为你的URL，当它们匹配时，jQuery将添加activeOh类。因此，id应该与url相同。但是如果url位于像test/other test/about.html
@Yuri这样的文件夹中，那会怎么样呢？好吧，你必须用php做一些if语句