删除导航链接上的活动类

时间:2012-12-23 18:03:27

标签: javascript jquery html navigation

这是我的HTML菜单结构:

<div id="footer-menu">
                <ul>
                    <li><a id="creative-events-menu" href="#/creative-events"></a></li>
                    <li><a id="creative-ajans-menu" href="#/creative-ajans"></a></li>
                    <li><a id="incentive-travel-menu" href="#/incentive-travel"></a></li>
                </ul>
                <ul>
                    <li><a id="hakkimizda-menu" href="#/hakkimizda"></a></li>
                    <li><a id="haberler-menu" href="#/haberler"></a></li>
                    <li><a id="galeri-menu" href="#/galeri"></a></li>
                    <li><a id="referanslar-menu" href="#/referanslar"></a></li>
                    <li><a id="iletisim-menu" href="#/iletisim"></a></li>
</ul>
                    </ul>
            </div>

我想要,在活动菜单上添加active类,当我得到另一个页面时删除。

JS:

<script type="text/javascript">

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

    });
});

</script>

此脚本添加active类,但不删除。我该如何解决?

1 个答案:

答案 0 :(得分:2)

以这种方式更改脚本,有效:

  <script type="text/javascript">
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            $(this).closest('ul').find('.active').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
  </script>

如果您想将课程添加到<a>,请使用此代码:$(this).addClass('active');代替$(this).parent().addClass('active');

小提琴:http://jsbin.com/uyidom/1


这是一个错字还是你有</ul>两次?