添加班级点击 - JS标签

Question

我有一个3个标签，带有一个类'fetch_records'。当用户点击另一个选项卡时，应该通过添加新类别'years_active'来激活点击的选项卡，其他应该保持相同，并且如果有的话，则将类别'years_active'删除。

我的代码是：

$('.fetch_records').click(function (e) { 
    $('.fetch_records').removeClass('years_active'); 
    $(this).addClass('years_active'); 
    e.preventDefault(); 
    $('.ajax-loader').show(); 
    var year = $(this).attr('data-year'); 

    $.ajax({ 
     ...Do SOmething... 

     success: function (msg) { 
      ...show success message... 
     } 
    }); 
}); 

HTML：

<li><a data-year="2001" class="fetch_records years_active"> 2001 <a/> </li> 
<li><a data-year="2002" class="fetch_records"> 2002 <a/> </li> 
<li><a data-year="2003" class="fetch_records"> 2003 <a/> </li> 

Answer 1

是绝对没有错，你的这部分代码，它运行完美：http://jsfiddle.net/fnp27nng/1/

即使你标记是格式错误 - 正如大家所指出的那样 - 您的问题在于您的代码中的其他位置。

尝试检查javascript控制台是否有错误。

的JavaScript

$('.fetch_records').click(function(e) { 
    $('.fetch_records').removeClass('years_active'); 
    $(this).addClass('years_active'); 
    e.preventDefault(); 
}); 

CSS

.fetch_records { 
    background: #EEE; 
} 
.years_active { 
    background: #F00; 
    color: #FFF; 
} 

HTML

<li><a data-year="2001" class="fetch_records years_active">2001</a></li> 
<li><a data-year="2002" class="fetch_records">2002</a></li> 
<li><a data-year="2003" class="fetch_records">2003</a></li>