This is the second part of #-Link-Snipped-#. If you haven't read this, please check it out first and come back here, to get the context.

We are going to use jQuery to make our work simple. So, in the section, we will add a link to the jQuery library, probably from the Google APIs.

Note that we are using jQuery 1.7.2 for stability purposes. And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, lets add these three links:

HTML

    
Change Themes:
    [url=light]Light[/url]
    [url=grayscale]Grayscale[/url]

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

Here, we are changing just the class attribute of the tag, which is supported by all the browsers. We also add a return false; to the .click() function of the link, in order not to propagate to the link specified in the href attribute of the Link 3