在菜单的当前页面上设置一个 CSS 类

Question

我有一个静态网站，但我通过 php 的 include 函数包含了页面的不同位（标题、标题、图像滑块、页脚），以使网站易于管理。 现在的问题是菜单栏中的当前页面的名称必须已经selected =“selected”才能显示在前端按下的当前页面的名称。

我提出了一个解决方案，给每个菜单项一个 id，然后将以下代码注入每个页面的末尾并设置该页面的 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，取决于你当前的网站架构。

Answer 2

我发现的（特定）问题的解决方案是，
我为所有菜单项提供了 id，这些 id 与相关文件（它们将链接到的文件）同名，例如链接到 home.php 的按钮的 id 为“home”和链接到 profile.php 的按钮被赋予了“profile”的 ID，而不是在页脚中包含以下代码

<?php
$php_self = $_SERVER['PHP_SELF'];
$basename = basename($php_self);
$id = basename($basename, ".php");
?>

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

（使用了jQuery，但如果网站还没有jQuery，则必须使用document.getElementById）。

感谢大家的宝贵时间..

Answer 3

js和php可以一起使用：

$(document).ready(function(){
    $("#<?=$current_page?>").addClass('active')
})

它比 Maxime Lorant 的代码短...

或者如果您的网址类似于 site.com/#home ，这就是解决方案： Get css id from url（不含 php/js）