Question

我创建了一个模块化网页，其中每个组件都在其自己的html / php文件中。例如，index.html调用了header.html，content.php等原因，所以我可以保持每个部分的清洁和分离。

我的header.php包含一个导航栏（也使用CSS3提供下拉菜单（例如，DEF）：

<div id="nav">
<ul><li class="navlist"<a href="abc.html">ABC</a></li>
<li class="navlist"><a href="def.html">DEF</a>
<ul>
  <li><a href="#ghi.html"><li>GHI</li></a>
  <li><a href="#jkl.html">JKL</a></li>
</ul></li>
<li class="navlist"><a href="mno.html">MNO</a></li>
</ul>

我的困境是，如果是正在查看的当前页面，我希望'li class'等于'nav_active_menu'。

我假设PHP可以解决这个问题，但不确定如何做到这一点。任何人都可以提供任何示例或关于如何执行此操作的链接吗？

希望这有道理......话语......

Answer 1

您可以在包含header.php页面

之前创建$ activePage变量你在abc.php文件中

：

$activePage = "abc";
include('header.php');

并在header.php文件中：

<li class="<?php if ($activePage == "abc") echo 'nav_active_menu'; ?>"><a href="abc.html">ABC</a></li>

对于其他页面使用相同的方法，但使用$ activePage变量具有不同的值。

Answer 2

这是另一个解决方案，使用javascript与jquery。

为每个父li添加特定的CSS类：

<div id="nav">
  <ul>
    <li class="navlist abc"><a href="abc.html">ABC</a></li>
    <li class="navlist def"><a href="def.html">DEF</a>
       <ul>
            <li><a href="#ghi.html">GHI</li></a>
            <li><a href="#jkl.html">JKL</a></li>
       </ul>
    </li>
    <li class="navlist mno"><a href="mno.html">MNO</a></li>
  </ul>
</div>

然后将jquery javascript添加到HTML中的<head>。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

将此添加到您的CSS：

.nav_active_menu {your css for active_item goes here}

在每个HTML页面中添加相关的jquery选择器以激活：

<script>
$(".def a").first().addClass('nav_active_menu');
</script>

请参阅小提琴：http://jsfiddle.net/tmfncbb7/2/（用正确的班级更新小提琴）

如何基于它是否为当前页面来分配CSS类？

2 个答案: