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');
    });
});

此功能添加活动类，确定。

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

但是，点击其他链接时，请不要删除之前的class标记。

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

我该如何解决？

Answer 1

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

Answer 2

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

$('#footer-menu a').click(function(){
     $('#footer-menu a').removeClass("active");
     $(this).addClass("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/

类标记不会删除

3 个答案: