类标记不删除

Question

我有HTML菜单结构。具有以下功能：

<div id="footer-menu">
  <ul>
    <li><a id="menu-1" href="site.com/1"></a></li>
    <li><a id="menu-2" href="site.com/2"></a></li>
    <li><a id="menu-3" href="site.com/3"></a></li>
    <li><a id="menu-4" href="site.com/4"></a></li>
    <li><a id="menu-5" href="site.com/5"></a></li>
  </ul>
</div>

我想在活动菜单上添加活动类。我的JS：

$(function() {
    $('#footer-menu li a').click(function(e) {
        // you usually want to prevent default for handling link clicks,
        // otherwise the browser follows the href (if that's intended skip this)
        e.preventDefault();

        $('#footer-menu li a').not(this).removeClass('active');
        $(this).addClass('active');
    });
});

此函数添加活动类，OK。

<li><a id="menu" href="site.com" class="active"><a>

但是当点击另一个链接时，不要删除class标签。

<li><a id="menu" href="site.com" class><a>

我怎么才能修复它？

Answer 1

首先，使您的HTML标记有效，因为它们具有重复的ID。

你可以试试这个

$('#footer-menu a').click(function(){
     $('#footer-menu a').removeClass("active");
     $(this).addClass("active");
});

Answer 2

您不需要删除"class“属性。浏览器调试器向您显示它，因为它是存在的，但是只要它没有值 "active“类，它就不会有任何伤害。

Answer 3

<div id="footer-menu">
<ul>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
</ul>
</div>

Jquery代码：

$(function() {
    $('#footer-menu li a').click(function(e) {
        e.preventDefault();
        $('#footer-menu li a').each( function() {
        $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});​

http://jsfiddle.net/aApYZ/1/