Question

解决方案：已接受答案提供的后续解决方案下面提供的代码摘录作为更清晰的解决方案。

<?php
$active_home = "active";
include('header.php');
?>


<div id="content">
    <title>Welcome to the home page.</title>
    <p>index</p>

</div>

$ active_home必须在include之前，以便影响头文件。

<html>
    <head>
        <link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>

    </head>

    <div class="topnav" id="mytopnav">
        <a href="/Index.php" id="homenav" class="<?php echo $active_home; ?>">Home</a>
    </div>
</html>

目前我有一个主要的CSS表格，它指定了导航栏的所有样式我想提供一个关于用户所在页面的指示，the tutorial I followed使用“.active”类来更改背景和文本颜色。
问题是他们的方法在导航栏上指定了活动页面。这不起作用，因为导航栏认为活动页面永远不会更改。

我要做的是在每个页面的开头添加一个小样式表，将导航栏上的当前页面设置为活动状态。
如果我使用像

这样的东西，我可以很容易地做到这一点

<style>
#homenav{
    background-color: #4CAF50;
}
</style>

对于每个页面，在上面的例子中是主页但是，这意味着如果我想更新活动页面的样式，我需要单独更改每个页面。

我宁愿做的是像

<style>
#homenav{
    (add the .active class)
}
</style>

这让生活变得更轻松，但目前我遇到了引用问题 在CSS中是否可以将类添加到特定ID？如果不这样做，有没有办法在主css中声明一个可以在其他样式表中引用的变量？

主要CSS：

* {
  margin: 0;
}

#body{
    margin: 0px;
    padding: 0px; 
    font-family: Calibri;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

 /*Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Answer 1

在您当前的情况下，您有动态页面，您要在其中突出显示与活动页面相关的导航栏中的菜单。它可以使用以下逻辑简单地实现。

如果您有固定数量的动态网页 我们举一个例子，你有下面的导航栏（菜单）项目。

主页
关于
服务
联系

在每个页面中，您都有动态内容。您需要的是PHP，而不是HTML / CSS。

将导航栏文件作为单独的文件。根据需要命名。例如，nav-items.php并包含在PHP页面中。

现在在nav-items.php中应用以下逻辑：

<li id="home" class="<?php echo $active_home; ?>">Home</li>
<li id="about" class="<?php echo $active_about; ?>">About</li>
<li id="services" class="<?php echo $active_services; ?>">Services</li>
<li id="contact" class="<?php echo $active_contact; ?>">Contact</li>

如果您在计数方面也有动态页面，并且您不确定页面名称，请改用以下代码。

<?php
    $dynamic_page_name = "Page Name" //This is can be fetched from database
?>

<li id="<?php echo $dynamic_page_name; ?>" class="<?php echo ${"active_" . $dynamic_page_name}; ?>"><?php echo $dynamic_page_name; ?></li> //Since it is an example of dynamic page names, so I am only giving one List Item example.

现在在每个PHP页面中，添加以下代码。

例如，About将有以下代码：

<?php
    $active_about = "active";
?>

如果您在计数方面也有动态页面，并且您不确定页面名称，请改用以下代码。

<?php
    $dynamic_page_name = "Page Name" //This is can be fetched from database

    ${"active_" . $dynamic_page_name} = "active";
?>

这将为每个页面添加active类，其中仅为此目的定义了特定的PHP变量。因此，一旦在每个页面中加载nav-items.php，只有相关页面会添加active类。

将类添加到CSS

1 个答案: