jQuery如何为主菜单添加活动类？

Question

我希望你能帮我翻译一下关于 IT 技术方面的内容。以下是需要翻译的内容：

我想要在我的主菜单上添加动态活动类，但是我无法实现这个目标。

我的 jQuery 代码如下：

<script type="text/javascript">
$(document).ready(function() {
  $('#navi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>

我的主菜单如下：

<ul id="navi">
  <li><a href="#">About MHG</a></li>
  <li><a href="#">Workout Programs</a></li>
  <li><a href="#">Fitness Tips</a></li>
  <li><a href="#">Contact Us</a></li>          
  <li><a href="#">Read Our Blog</a></li>
</ul>

- Vin_fugen

---

当所有a元素的href属性都设置为#时，这怎么可能起作用呢？ - Rory McCrossan

Answer 1

试一试

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

jQuery

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

请查看这个Fiddle http://jsfiddle.net/9nd4j/1/

- krizna

---

这个方法无法在完全重新加载页面的情况下使用，只适用于部分重新加载并保留菜单的页面。 - Rvervuurt

Answer 2

^^和Rory的评论一样!!

如果你还需要，你可以这样做

$("#navi a").live("click", function(){
  $("#navi a").removeClass("active");
  $(this).addClass("active")
});

如果您的所有链接都指向同一页，则上述解决方案可行。但是，如果您要从一个页面遍历到另一个页面，则此方法不适用。

谢谢。

- abhijit

Answer 3

这种方法将检查用户正在访问的页面URL，然后在<li>标签中添加活动类。

HTML

<div id="nav">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="member.php">Member</a></li>
        <li><a href="project.php">Project</a></li>
        <li><a href="activity.php">Activity</a></li>
    </ul>
</div>

JS

var setActive = function () {

    // Get the last item in the path (e.g. index.php)
    let url = window.location.pathname.split('/').pop();

    // Add active nav class based on url
    $("#nav ul li a").each(function () {
        if ($(this).attr("href") == url || $(this).attr("href") == '') {
            $(this).closest('li').addClass("active");
        }
    })

    // Add the active class into Home if user omit index.php from url
    if (url == '') {
        $("#nav ul li").eq(0).addClass("active");
    }
};

$(function () {
    setActive();
});

- Penny Liu

Answer 4

您的描述不是很清楚。如果您所说的“active”指的是您正在悬停的列表项，则应该是这样的：

$('a.menu').hover(

function () {
    $(this).addClass("active");
},

function () {
    $('a.menu').removeClass("active");
});

- Jehanzeb.Malik