jquery - Jquery将活动类添加到主菜单

Question

我正在尝试将动态活动类添加到我的主菜单中，但我无法实现这一点，

我的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>

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");
});

检查这个小提琴http://jsfiddle.net/9nd4j/1/

Answer 2

^^ 与上述罗里的评论相同！！

, 如果你还需要你可以做

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

如果您的所有链接都指向上述解决方案的同一页面，那么我看到您要从一个页面遍历到另一个页面，这将无法正常工作。

谢谢

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();
});

Answer 4

你的描述不是很清楚。如果你的意思是你悬停的列表项，那么它应该是这样的：

$('a.menu').hover(

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

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