在php中突出显示菜单中的当前页面_Php_Html_Css_Highlight

在php中突出显示菜单中的当前页面

php html css

在php中突出显示菜单中的当前页面,php,html,css,highlight,Php,Html,Css,Highlight,我想用php突出显示菜单中的活动页面。该页面是静态版本，仅使用include in php调用公共文件，即header.php、footer.php、navigation.php navigation.php <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav">

我想用php突出显示菜单中的活动页面。该页面是静态版本，仅使用include in php调用公共文件，即header.php、footer.php、navigation.php

navigation.php

<div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="contact-us.php">Contact</a></li>
                    </ul>
                </div>

<?php
// Including Files
include('includes/header.php');
include('includes/navigation.php');
?> Rest HTML code goes here

<div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="index"><a href="index.php">Home</a></li>
        <li class="contact><a href="contact-us.php">Contact</a></li>
    </ul>
</div>

// after php includes
<head>
    .index {
        color:red;
    }
</head>

// after php includes
<head>
    .contact {
        color:red;
    }
</head>

index.php

<div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="contact-us.php">Contact</a></li>
                    </ul>
                </div>

<?php
// Including Files
include('includes/header.php');
include('includes/navigation.php');
?> Rest HTML code goes here

<div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="index"><a href="index.php">Home</a></li>
        <li class="contact><a href="contact-us.php">Contact</a></li>
    </ul>
</div>

// after php includes
<head>
    .index {
        color:red;
    }
</head>

// after php includes
<head>
    .contact {
        color:red;
    }
</head>

Rest HTML代码在这里

您可以使用以下选项：

.active，.home:悬停{
背景色：#666；
颜色：白色；
}

您为链接提供了一个

ID

，如

#activeHome

和

#activeContact

。

在

页面上，联系相应的联系人。


您应该在navigation.php文件中的每个li类属性中使用条件语句。使用$\u SERVER[“PHP\u SELF”]预定义变量，例如联系人链接：
<li class="<?php $_SERVER['PHP_SELF'] === '/contact-us.php' ? 'active' : '' ?>"><a href="contact-us.php">Contact</a></li>

您只需在每个页面的
元素中添加适当的类，然后用一些CSS突出显示相应的页面按钮
代码示例：
navigation.php
<div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="contact-us.php">Contact</a></li>
                    </ul>
                </div>

<?php
// Including Files
include('includes/header.php');
include('includes/navigation.php');
?> Rest HTML code goes here

<div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="index"><a href="index.php">Home</a></li>
        <li class="contact><a href="contact-us.php">Contact</a></li>
    </ul>
</div>

// after php includes
<head>
    .index {
        color:red;
    }
</head>

// after php includes
<head>
    .contact {
        color:red;
    }
</head>




PHP
$activePage = basename($_SERVER['PHP_SELF'], ".php");

HTML
<ul class="nav navbar-nav">
      <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="index.php">Home</a></li>
      <li class="<?= ($activePage == 'contact-us') ? 'active':''; ?>"><a href="contact-us.php">Contact</a></li>
</ul>


如果列表中有活动类，请使用CSS进行高亮显示？