javascript - 在菜单中的当前页面上设置 CSS 类

Question

我有一个静态网站，但我通过 php 的包含功能包含了页面的不同部分(头部、页眉、图像 slider 、页脚)，以使网站易于管理。 现在的问题是菜单栏中的当前页面名称必须有 selected="selected"以显示在前端按下的当前页面名称。

我提出了一个解决方案，为每个菜单项提供一个 ID，然后将以下代码注入(inject)每个页面的末尾并设置该页面的 ID(示例代码中选择的主页按钮 ID)。

<script type="text/javascript">
    $(document).ready(function() {
        $('#home').addClass('active');
    });
</script>

现在的问题是我必须在每个页面中包含这个脚本并将 id 更改为该页面(例如，在上面的脚本中我已经将代码粘贴到主页中，

我想要一个解决方案，我只向我的 footer.php 添加一次代码块，它会自动检测当前页面并为该菜单项设置 select="selected"。

提前谢谢大家...

Answer 1

在 PHP 中，如果您知道当前访问的页面，您可以将 active 类放在菜单定义中(如果它在每个页面上都相同):

<ul>
   <li <?php if($current_page == 'home') echo 'class="active"'; ?>>Home</li>
   <li <?php if($current_page == 'blog') echo 'class="active"'; ?>>Blog</li>
   <li <?php if($current_page == 'contact') echo 'class="active"'; ?>>Contact</li>
</ul>

等等......你不需要Javascript(一些用户禁用)。唯一需要的是获取$current_page变量，这个变量可以是基于URL或者页面的ID，这取决于你当前的网站架构。