突出显示导航栏中带有通用标题的活动页面


highlight active page in navigation bar with common header

我是网络编程的新手。我做了一个简单的网站,有一个共同的标题。我的标题位于一个名为 inc/common_header.php 的文件夹中,我在所有其他页面中都包含此标头。到目前为止,标题运行良好,但我想在当前页面的导航菜单中放置不同的颜色。我尝试了这个解决方案:

<?php 
if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';
?>

这个解决方案效果很好,但我的问题是我将导航栏放在一个单独的页面中,当我单击时,结果总是相同的 inc/common_header.php 而不是当前页面。

这是我的代码:

common_header.php

<nav class="navigation-bar fixed-top">
<nav class="navigation-bar-content">
    <a class="element brand" href="/"><span class="icon-grid-view"></span> COMPANY NAME</a>
    <span class="element-divider"></span>
    <a class="element brand" href="/"><span class="icon-home"></span> HOME</a>
    <div class="element">
        <a class="dropdown-toggle" href="#"><span class="icon-printer"></span> SERVICES</a>
        <ul class="dropdown-menu" data-role="dropdown">
            <li><a href="#">SERVICE 1</a></li>
            <li><a href="#">SERVICE 2</a></li>
            <li><a href="#">SERVICE 3</a></li>
            <li class="divider"></li>
            <li><a href="#">SERVICE 4</a></li>
            <li><a href="#">SERVICE 5</a></li>
            <li class="divider"></li>
            <li><a href="#">SERVICE 6</a></li>
            <li><a href="#">SERVICE 7</a></li>
        </ul>
    </div>
     <div class="element">
        <a class="dropdown-toggle" href="#"><span class="icon-printer"></span> CALCULATOR</a>
        <ul class="dropdown-menu" data-role="dropdown">
            <li><a href="calc_home.php">HOME</a></li>
        </ul>
    </div>
    <a class="element brand" href="about.php"><span class="icon-printer"></span> ABOUT</a>
    <div class="element place-right">
        <a class="dropdown-toggle" href="#"><span class="icon-cog"></span> SETTINGS</a>
        <ul class="dropdown-menu place-right" data-role="dropdown">
            <li><a href="#">MY ACCOUNT</a></li>
            <li><a href="#">MY PRODUCTS</a></li>
            <li class="divider"></li>
            <li><a href="#">LOG OUT</a></li>
        </ul>
    </div>
    <span class="element-divider place-right"></span>
    <button class="element image-button image-left place-right"> USERNAME <img src="img/me.jpg"/></button>
</nav>

提前感谢您的帮助。我会很感激的。

我会假设你的问题是这样的:

您网站上的网页(标题)在文件"common_header"中有一个公共部分。您将该文件"common_header"包含在您网站的所有页面中(例如:首页、简介、服务、产品、联系人)。但是在其中一个页面(例如:联系人)中,并且仅在该页面中,您希望以不同的样式显示标题。

如果这是您的问题,我的解决方案是:

在您的"common_header"页面中,请使用此 php 代码而不是您拥有的代码:

if(isset($specialPage) && $specialPage == "this is the special page"){
    echo 'class="current"';
};

然后,在您的"联系人"页面(我用作示例)中,您在包含标题页面之前编写以下内容:

$specialPage = "this is the special page";
include("your header page");

同样,如果这不是您想要的,我很抱歉误解了您的问题。

尝试将其中一个 href 更改为 about.php,看看它是否有效。例:

       <ul class="dropdown-menu" data-role="dropdown">
        <li><a href="about.php">About</a></li>
        //etc

就目前而言,您的超链接转到您的index.php,这为PHP_SELF超级赋予了相同的价值,因此永远不会同意about.php。至少我可以通过这个有限的代码示例看到的。如果这不起作用,请编辑您的问题以包含 $_SERVER['PHP_SELF'] 的输出,无论如何这应该为您提供线索。

此外,在比较字符串时没有理由使用 strpos;改用 === 运算符,它检查参数是否属于相同类型以及它们是否具有相同的值。