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
Post a Comment