javascript - 从导航链接中添加和删除事件类

Question

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

我正在尝试通过在单击链接时添加和删除类来使我的导航处于事件状态。

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

Answer 1

您要从最近的 li 的子元素中删除“active”类，然后将 active 类添加到当前的 a 中父 li。本着将事件类保留在 anchor 上而不是列表项上的精神，这对您有用:

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

事件链接是事件链接。在任何给定时间都不会有超过一个链接处于事件状态，因此没有理由对删除 active 类进行具体说明。只需从所有 anchor 上移除。

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