CSS“主动”将 HTML 转换为 PHP include 时不起作用

Question

我意识到有人问了“类似”的问题，但其他用户使用的方法与我截然不同。我只是想在我的 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" width="234" height="118" border="0" alt="logo" /></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" width="234" height="118" border="0" alt="logo" /></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>

Answer 1

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

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

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

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