将 HTML 转换为 PHP 包含时，CSS“活动”不起作用

Posted 2023-03-06

【中文标题】将 HTML 转换为 PHP 包含时，CSS“活动”不起作用

【英文标题】：CSS 'active' does not work when converting HTML to PHP include

【发布时间】：2011-03-04 17:04:40

【问题描述】：

我意识到有人问了一个“类似”的问题，但其他用户使用的方法与我大不相同。我只是想在我的 php 页面上包含一个 html 导航，以便以后修改。当您将鼠标悬停在按钮上时，它会突出显示，而“活动”页面始终突出显示。悬停适用于 html 和 php 页面。

当我的索引页面编码为 index.html 时，“活动”状态有效。当我将它作为 index.php 运行时，它不会。

Header.html

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif"   border="0"  /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.php"><span>Home Page </span></a></li>         
          <li><a href="portfolio.php"><span>Services</span></a></li>
          <li><a href="portfolio.php"><span>Portfolio</span></a></li>          
          <li><a href="about.php"><span> About Us </span></a></li>
          <li><a href="contact.php" class="active"><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

CSS：

/*menu*/
.menu  padding:38px 0 0 0; margin:0; width:480px; float:right; 
.menu ul  text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; 
.menu ul li  float:left; margin:0; padding:0 5px; border:0; 
.menu ul li a  float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; 
.menu ul li a span  padding:12px 9px; background:none; 
.menu ul li a:hover  background: url(../images/r_menu.gif) no-repeat right; 
.menu ul li a:hover span  background:url(../images/l_menu.gif) no-repeat left; 
.menu ul li a.active  background:url(../images/r_menu.gif) no-repeat right; 
.menu ul li a.active span  background:url(../images/l_menu.gif) no-repeat left; 

如上所述，如果 header.html 中的上述链接编码为 (page.html)，则“主动悬停”有效。什么给了？

分辨率

对于那些感兴趣的人，感谢 Kirkby 的帮助，我重新创建了 Header.html 文件，将其保存为 PHP 并利用了 Request_URI 功能。变化如下：

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif"   border="0"  /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index" <?php if($_SERVER["REQUEST_URI"] == "/index")  echo 'class="active"'; ?>><span>Home Page </span></a></li>
          <li><a href="about" <?php if($_SERVER["REQUEST_URI"] == "/about")  echo 'class="active"'; ?>><span> About Us </span></a></li>          
          <li><a href="portfolio" <?php if($_SERVER["REQUEST_URI"] == "/portfolio")  echo 'class="active"'; ?>><span>Services</span></a></li>
          <li><a href="enroll" <?php if($_SERVER["REQUEST_URI"] == "/enroll")  echo 'class="active"'; ?>><span>Enroll</span></a></li>
          <li><a href="contact" <?php if($_SERVER["REQUEST_URI"] == "/contact")  echo 'class="active"'; ?>><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

【问题讨论】：

您是否在浏览器中查看了工作和非工作版本的源代码并比较了哪些不同？

来源是一样的，它在页面是html时起作用，而在PHP中编码时不起作用。除此之外，完全相同。我认为这一定是 PHP 识别 CSS 类的方式有所不同

PHP 与它无关。 浏览器 可以将 CSS 规则集（基于它们的选择器）链接到 HTML 元素。如果 CSS 选择器包含一个或多个类选择器，它们会在计算中包含 HTML 类。 （没有 CSS 类之类的东西）。

你能提供一个完整的例子吗？完整的 php 文件不起作用，而完整的 html 文件起作用？

不应该是“a:active”（与“a.active”相比）吗？

【参考方案1】：

当您在 PHP 页面中包含 HTML 文件时，如何将 class="active" 添加到正确的按钮？从您的示例中，您所包含的 HTML 头文件看起来好像有“联系我们”按钮处于活动状态，并且所有页面都是如此。

您需要在标题中添加一些 PHP 代码以将 class="active" 添加到正确的按钮，或者在浏览器中使用 javascript 将类添加到每个页面的正确按钮。当我在包含文件中编写标题时，我通常会创建一个带有参数的函数，用于在导航部分中选择当前选项卡。然后我从主页的适当位置调用该函数。

【讨论】：

柯比 - 你完全正确。使用包含，无论页面如何，联系人始终处于活动状态。你有任何项目的示例代码来完成这个吗？

这仅适用于 Apache 服务器对吗？我正在尝试在我的菜单中实现它，但它不起作用。

@Jeffrey，PHP 手册说 _SERVER[] 条目因服务器而异：ca3.php.net/manual/en/reserved.variables.server.php 换句话说，您的服务器可能不包含 'REQUEST_URI' 的条目。尝试使用phpinfo() 函数来查看哪些条目可供您使用。 'QUERY_STRING' 条目可能是您最好的选择。但是，我发现将标头 HTML 放入函数中并将选项卡名称作为参数传递是最简单的。然后你就不必搞乱服务器变量了，这一切都是明确的。

【参考方案2】：

这是我的解决方案；这很容易：

<ul id="menu">
    <?php 
    $c=$_GET[c];
    ?>
    <li><a href="index.php?c=inicio.html" <?php if($c=="inicio.html") echo 'class="active"';?>>Inicio</a></li>
    <li><a href="index.php?c=corporativo.html" <?php if($c=="corporativo.html") echo 'class="active"';?>>Corporativo</a> </li>
    <li><a href="index.php?c=diseno.html" <?php if($c=="diseno.html") echo 'class="active"';?>>Diseño</a></li>
    <li><a href="index.php?c=impresion.html" <?php if($c=="impresion.html") echo 'class="active"';?>>Impresión</a> </li>
</ul>

我只读取了我在包含中使用的变量。