php - 将 HTML 转换为 PHP 时，CSS 'active' 不起作用

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 header 文件似乎激活了“联系我们”按钮，所有页面都是这样。

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