Add a class On Click - JS Tab

I have a 3 Tabs, with a class 'fetch_records'. When the user clicks on the other Tab, the clicked tab should get activated by adding the new class 'years_active' and other should remain same and the class 'years_active' get removed if any.

My code for that is :

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

-------------Problems Reply------------

There is absolutely nothing wrong with this part of your code, it runs perfectly: http://jsfiddle.net/fnp27nng/1/

Even though your markup is malformed - as pointed out by just about everyone -, your problem lies somewhere else in your code.

Try checking the javascript console for 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>

Category:javascript Views:4 Time:2018-06-09

Related post

  • JQuery add / remove class on click for tabs using Twig as template 2011-03-29

    I have a tabbed widget that is dynamically populated by Weed/Month/Year, I need to make the correct tab show on click and hide the others. Jquery: $("#tab1").click(function(){ $("#tab1").removeClass("notactive").addClass("active"); $(this).addClass("

  • Error in opening a new class on click of tab in Android application 2011-12-19

    I am developing an Android application in which I have a tab bar. I want that when I click on tab new class should open. How do I implement this? My main problem is when I pass the intent on clicking the tab. Then it's crashing. I am posting my Java:

  • jquery add a class to $('').click(function(){-}) 2011-07-21

    How can I add a class to tags such as a & span in these examples: $('<a/>').click(function(){...}) $("<span/>").text(chars.substr(0, limit-1)); ================= Here is the full script. It adds spans and a tags to portions of text. I

  • how to move between different classes when click on tab bar item in iphone 2012-01-23

    It might look simple but i am not able to figure it out for xcode 4.2. In older version there are option to set viewController but here i am not getting how to do. In a view i have tab bar.I have added four items likes Services,history,favourites. Wh

  • Better way to add/remove classes on click 2012-02-01

    I have two links, ".sp" and ".sl" when you click they change the visibility of some content ("#live") and ("#paid"), a low level type of tab interface i guess. I ad a class of 'active' on click and remove the class on the other link if it had it. Thi

  • jQuery - Add a class on click, remove it on Hover 2010-03-09

    I've got a simple jquery menu set up... it works fine except for the parent item. I've only listed one parent item, but there may be many, so raw #id won't work for this either. I want to apply a class when it is CLICKED, but then remove that class w

  • swap classes on click 2011-04-17

    I have a list of 6 items that are in a global div (navigationagence) Right now I am able to add a class on click but right now they adds up which means that once my six items are clicked they all end up with the currentagence class. I want to be able

  • jquery add remove class onclick 2011-08-21

    i have any navigation menu ! <div class="nav"> <ul class="navigation"> <li class="selected"><a href="#">HOME</a></li> <li><a href="#">PROFILE></a></li> <li><a href="#">CONTACT

  • Add and remove class on click 2011-08-16

    I have a tab menu, and i want onlick be be added a class="selected" - and on click on one of the other tabs, the class should be removed from the current link, and then be added to the link i've clicked on... I've tried this but didnt work $('.tab-li

  • jquery properties.. while clicking a tab it should not do anything..hw do i add this feature? 2012-03-29

    Im trying to create a ui tab using jquery and in this one I m planning to add 4 tabs and I want to add the option like if first tab is open, the other three should be disabled. the clikc option should not open a new div for the ones except the one iv

  • Using RichFaces jquery to add another class to a tab 2009-07-05

    I have a rich:tabPanel with several tabs in it. I want to use jquery to record changes on each tab so that when a change is made within a tab I change the background image of the tab. It looks like this: <h:form id="form"> <rich:jQuery selec

  • click .toggle add/remove class 2010-04-27

    When i click #tool I want to add the class .spanner to the div #drill. However when #drill has the class .spanner and #tool is clicked i want the class to be removed? --------------Solutions------------- Use the toggleClass function: $("#tool").click

  • How to add a "selected" class to a selected tab anchor using jQuery UI Tabs? 2011-04-23

    I'm using jQuery UI tabs(). It adds "ui-tabs-selected" to the selected LI, but each LI has an ID because it's different. Due to the multi ID/class bug in IE6, I need to apply a "selected" class to the anchor that is inside the "ui-tabs-selected" LI.

  • JavaScript add class on click works in IE9, doesn't work in IE7-8 2011-06-30

    I'm using a script to: toggle the class of my checkbox replacement element change the state of the checkbox itself initialize the state of the checkbox replacement based on the state of the checkbox itself It works fine in every browser (including IE

  • How to add a class to a form tag that only present on click event? 2011-07-19

    How to add a class to a form tag that only present on click event? For example: I do have this... <p>Below is a form: <span>show form</span></p> <div class="container"></div> when user clicks the "show form", jQuer

  • jQuery localScroll - how to add class to clicked ? 2011-08-24

    I got a scrolling content controlled via href's in navigation. I use localScroll to scroll the content. So question is how to add class to attribute of currently displayedpart of a content. That's how I initiate scroll <script style="text/javascri

  • How to add class on click with jQuery to list item? 2011-09-20

    I have a list item like <ul> <li><img id="1" src="" /></li> <li><img id="2" src="" /></li> <li><img id="3" src="" /></li> </ul> <input type="button" > I would like on click of an

  • How to add more application shortcuts under new tab when we right click on the desktop. 2012-09-16

    How to add more application shortcuts under new tab when we right click on the desktop. --------------Solutions------------- Hi, I would suggest you to post your queries in "User Interface development for Windows Desktop" forums for better assistance

  • Visual Studio 2010: Add new class file that inherits from existing class? 2011-04-11

    Is there a way in Visual Studio 2010 to add a new file (class) to a project that inherits from an existing base class, abstract or otherwise? This seems like a simple concept but I can't find a way to do it. I'd like to be able to for example right c

  • jquery - add "active" class to children elements 2011-07-22

    Need to add an active class to my parent element if a user clicks on the child element in a list. The below script is used if a user clicks on the parent link. Javascript: <script language="javascript" type="text/javascript"> $(document).ready(

  • Can not click on tab when mouse listener has been added 2011-10-19

    I have been trying to add a pop up menu to the tab title of a JTabbedPane, which I have managed to do as follows: tabbedPane.setTabComponentAt(a+2, x); x.addMouseListener(new MouseListener() { @Override public void mouseReleased(MouseEvent e) { maybe

  • How to add layout within a layout in tabs 2012-03-27

    I want to be able to get something similar to this.. I want to be able to add the text views inside the tabs... This has to be done dynamically.. as in when the add button is clicked in another activity the text views should be aligned similar to thi

  • adding css class to the selected tab in next and previous tab jquery tab 2012-05-02

    I want to add css class to the currently selected tab content so when i click on the next button the css of the currently selected tab content should be changed. I have tried the following code but it is not working: $("#tab-div").tabs(); $(".next-ta

  • show a div class on clicking a link 2009-06-26

    How do I show a div class on clicking a link? This is the div class that must be shown: <div id="fb_contentarea_col1down1"> <div class="myform" id="step2"> <form action="index.html" method="post" name="FieldSetting" id="FieldSetting"

  • Add partial class to TableAdapter 2009-07-16

    I use Visual Studio 2008, .NET 3.5 In my project I have a DataSet called SubCategory. In it is a SubCategoryTableAdapter, with some methods, added in designer with right click -> add query. I can use these methods on my page in a ObjectDataSource

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.177 (s). 11 q(s)