How to change CSS with jquery ?

Question

I have the following HTML generated dynamically by PHP. When I click active, it changed to inactive and vise versa.

I added div class='status' for jquery manipulation. (Do I need it? Can I do it without this div?)

I want to change CSS class='status' to class='inactive' when I click active and when I click inactive changing CSS class to 'active' as well, so that I can change a color or add bg image etc.

HTML

...
...    
<tr valign='top'>
  <td align='center'>21</td>
  <td>Kontakt</td>
  <td>/kontakt.html</td>
  <td align='center'>
     <div class="status">
       <a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21"&gt;active&lt;/a&gt;
     </div>
  </td>
  <td align='center'>...
  ...
  </td>
</tr>

I am using jquery and I need some guidance.

Can anyone tell me some jquery code please?

--UPDATE--

There are many div with calss='status', so how can I tell jquery that I want to change the css which I clicked.

--UPDATE 2--

I want to check the value(active/inactive). And add it's value as class. e.x If its value is active, then add css class='active' and if it is inactive then class='inactive' etc. Can I do it? Or you have other suggestions how I should do it.

--UPDATE 3--

Thanks everyone. You guys rock. I tested some of codes. But the problem is that when I click active, it change the bg, but then refreshes the page to change to inactive via php/mysql. So this means each time I click the value(active/inactive) changes. So I think as I stated in update 2, it might be good idea to add css class depends on the value. More suggestions are welcome and I appreciate them. (I have not done it with AJAX yet...)

--UPDATE 4 --

Using ID is not a good idea since the table is created dynamically. I can add IDs but it will add more code. So I thought class is better.

--UPDATE 5--

I moved my question here. http://stackoverflow.com/questions/1909223/how-to-add-a-class-depends-on-value-with-jquery

After this, I now know what I want to do.

Answer 1

jQuery has functions toggleclass(), removeClass() and addClass(). These should help you along.

Without seeing the whole HTML its a bit difficult to suggest a selector. If you assigned an id to your div (e.g. mydiv) then you could have

$("#mydiv").removeClass('status').addClass('inactive');

Or just to flip them regardless:

$("#mydiv").toggleClass('status').toggleClass('inactive');

This makes use of chaining quite nicely

Answer 2

.addClass() .removeClass()

EDIT: In reponse to your update, you can have an onclick() function in your div that will change the class for that particular div.

<div onclick="changeClass" id="myId"></div>
function changeClass() { 
   $(this).toggleClass('status').toggleClass('inactive'); 
}

Please test that code, but I think that may be what you're looking for.

Answer 3

Your simplest solution would be to use the in-built toggle functions in jQuery, which will let you toggle the status of your specified classes using the standard jQuery selector syntax:

$(this).toggleClass("inactive");

See the doc page for more

Answer 4

With regards to your first question, you could probably move that class onto the enclosing <td /> (although background images don't always play nice there).

To add/remove a class with jquery, you can do something like so:

$('div.status').addClass('inactive');
$('div.status').removeClass('status');

Or, if you want it fired on a click use toggleClass

$('div.status', 'div.inactive').live("click", function(){
    $(this).toggleClass("inactive").toggleClass("status");
        });

This will also only fire on the specific div.status (or inactive) that you click.

Answer 5

If you don't want the div, which you asked about, you can remove it and select all links within a td (or add a class to specific td tags and adjust selector: $('td.status') to narrow down selection to just those).

//Click Handler to toggle active state of all links descendant of all td tags
$("td a").click(function(){
 //add/remove inactive class and add/remove active smoothly over 1/2 second in total
 $(this).toggleClass("inactive, 250").toggleClass("active", 250);
});

NOTE:

$("td a") will select all a tag descendants. To only get children a tags of td:

$("td > a")