从导航链接添加和删除活动类

Posted 2023-04-13

【中文标题】从导航链接添加和删除活动类

【英文标题】：Add & remove active class from a navigation link

【发布时间】：2012-01-12 20:47:45

【问题描述】：

不幸的是，我一直在寻找有关如何从链接中添加和删除类的教程，但没有成功。前面的所有问题都给了我一些理解，但并没有给我想要完成的结果。

我试图通过在单击链接时添加和删除一个类来使我的导航处于活动状态。

就 javascript 而言，这是我所拥有的：

$(document).ready(function()

    //active state  
    $(function() 
        $('li a').click(function(e) 
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        );
    );
);

这是我的导航：

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->

【问题讨论】：

我认为最快的选择是 $("main-nav ul li").removeClass('active')

【参考方案1】：

您将从最近的li 的子元素中删除“活动”类，然后将活动类添加到当前a 的父li。本着将活动类保持在锚点而不是列表项上的精神，这对您有用：

    $('li a').click(function(e) 
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    );

活动链接是活动链接。在任何给定时间，永远不会有超过一个链接处于活动状态，因此没有理由对删除 active 类一无所知。只需从所有锚点中移除。

演示：http://jsfiddle.net/rq9UB/

【讨论】：

谢谢，唯一的问题是现在点击链接时不会加载所选页面

原来e.preventDefault();也不会这样做:)

没有意识到我不接受。还有一个问题，现在它可以工作，但是当我单击（例如关于）时，它会将类添加到链接中，但不会将我带到页面。这是链接：contestabilidesigns.com/print.php

这是由e.preventDefault() 引起的。 e代表事件，事件的默认动作是将window.location改为href。如果您不希望链接表现为链接，为什么在代码中包含该行？

【参考方案2】：

试试：

$(function() 
    $('li a').click(function(e) 
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('.active').removeClass('active');
        $this.parent().addClass('active');

    );
);

您的选择器正在查看当前 ($(this)) a 元素的父元素，然后在该元素的子元素中查找 a。该元素中唯一的a 是您刚刚单击的那个。

我的解决方案改为向上移动到最近的ul，然后找到element that currently has the class ofactive`，然后删除该类。

此外，您的方法（如发布的）是将active 类名添加到li 元素，并且您希望从a 元素中删除类名。我的方法使用li，但可以修改为使用a，只需从最后一行中删除parent()。

参考资料：

children()。 closest(). find()。

【参考方案3】：

我想你想要：

$this.parents("ul").find("a").removeClass('active');

【讨论】：

他正在将类添加到 li 元素中，所以它应该是 ('ul li')

@Ben - 我认为他正在添加锚点

我的理解是 $("li a") 使 $(this) 成为锚点，然后他使用 $this.parent().addClass('active'); li 会是父母吗？

【参考方案4】：

试试这个：

$(function() 
    $('.start').addClass('active');
        $('#main-nav a').click(function() 
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');             
   );
);

只需将 .start 类添加到您希望类 .active 首先具有的导航元素。

然后在你的 css 中声明类 .active ：

#main-nav a.active 

/* YOUR STYLING */