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

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的子元素中删除"活动"类,然后将活动类添加到当前a父级li.本着将活动类保留在锚点上而不是列表项的精神,这对您有用:

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

活动链接是活动链接.在任何给定时间都不会有多个链接处于活动状态,因此没有理由对删除active该类进行全部具体操作.只需从所有锚点中删除即可.

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