0

我有 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>

我该如何解决？

4

3 回答 3

4

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

于 2012-12-25T13:35:27.607 回答
1

首先使您的 HTML 标记有效，因为它们具有重复的 ID。
你可以试试这个

$('#footer-menu a').click(function(){
     $('#footer-menu a').removeClass("active");
     $(this).addClass("active");
});
于 2012-12-25T13:33:58.290 回答
0 
<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/

于 2012-12-25T14:04:36.620 回答