6

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

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

就 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 -->
4

4 回答 4

19

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

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

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

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

于 2011-12-05T00:41:17.833 回答
1

尝试：

$(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 of`，然后删除该类。

此外，如发布的那样，您的方法是将active类名添加到li元素中，并且您希望从元素中删除类名a。我的方法使用li, 但可以a通过简单地parent()从最后一行中删除来修改为使用 。

参考：

于 2011-12-05T00:37:37.037 回答
0

我想你想要：

$this.parents("ul").find("a").removeClass('active');
于 2011-12-05T00:38:34.507 回答
0

尝试这个：

$(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 */

}
于 2011-12-05T00:41:43.840 回答