javascript - Add a class On Click - JS Tab -


i have 3 tabs, class 'fetch_records'. when user clicks on other tab, clicked tab should activated adding new class 'years_active' , other should remain same , class 'years_active' removed if any.

my code :

$('.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>   

there absolutely nothing wrong part of code, runs perfectly: http://jsfiddle.net/fnp27nng/1/

even though markup is malformed - pointed out -, problem lies somewhere else in code.

try checking javascript console errors.

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>  

Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -