Question

我找到了这个脚本，我理解为什么它不适用于我的菜单，但无法弄清楚如何让它工作

<script>
$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#menu li a").removeClass('current');
        $("ul#menu li a[href^='"+currentPHP+"']").addClass('current');
  });
</script>

<nav>
<ul class="menu">
    <li class="current"><a href="index.php">Home</a></li>
    <li><a href="gallery.php">Gallery</a></li>
    <li><a href="location.php">Location</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
</ul>

任何帮助将不胜感激。感谢。

Answer 1

您正在通过它的ID ul#menu选择ul。按类名选择它：ul.menu。您还要从a而不是li中添加和删除当前类。试试这个：

$(document).ready(function(){
    var i = document.location.href.lastIndexOf("/");
    var currentPHP = document.location.href.substr(i+1);
    $("ul.menu li")
       .removeClass('current')
       .has("a[href^='"+currentPHP+"']")
       .addClass('current');
});

Answer 2

我的解决方案

$(document).ready(function(){
  var currentPHP = document.location.pathname.replace(/.+\//i, "")
  $("ul.menu li a[href^='"+currentPHP+"']").parent().addClass("current");
});

Answer 3

您希望该课程位于<li>而不是<a>元素上吗？您将其添加到锚点本身。尝试：

$("ul.menu li").removeClass('current');
$("ul.menu li a[href^='"+currentPHP+"']").parent().addClass('current');

（你也是按id而不是选择，因为jazZRo指出 - 编辑使用类）

动态html javascript菜单主动选择

3 个答案: