<jQuery Switch/ Replace/ Change class name ⁄ >

I said it before, but I'll try to write more often in this section, but time's always running short and I almost left this section for last.

A few weeks ago in my work we had to build a full-ajax environment website, this is, no postbacks.
However all the links are crawlable, this is, bots will still be able to follow links and index its content, but in an user point-of-view, the website couldn't/ mustn't had any page refresh.

This website had multiple themes, such as:

in a products page, we have, for instance, a green theme;

in a sales page we have a yellow theme;

and so on, and so on, ...

Although not all the webpage would switch theme, for example, header and footer would always keep its company base colors.

The CSS had all the color themes, so basically what JavaScript had to do, was change an html object class name, for example:

<div class="green_theme&quot> (contents) </div>

Would had to turn to:

<div class="yellow_theme&quot> (contents) </div>

And so on, and so on...

So let's just build a basic plugin, called SwithClass.

It'll work, either, as a standalone function; and as a jQuery custom function (extending jQuery, so that we can benefit all its selector power). You'll see the examples ahead.

note: I didn't test it against jQuery >=1.4

style.css, a simple stylesheet

body{font-family: Tahoma, Verdana;}

.red{color: #B02B2C;}

.dark_gray{color: #666;}

.orange{color: #FF7400;}

.blue{color: #4096EE;}

jquery.SwitchClass.js, our plugin. It will work in the following two manners: