Toggle class

Toggle class

I need to change the whole style sheet upon toggling .. at button click

 

there are two style sheete

stylesheet_a.css nad stylesheet_b.css

and the only difference between two is body color (one is red and other is green)

but its not working fine  ..Let me share code
  1. <

    html xmlns="http://www.w3.org/1999/xhtml" >

    <

    head id="Head1" runat="server">

    <title>Untitled Page</title>

    <link rel="stylesheet" href="stylesheet_a.css" type="text/css" id="myStylesheet"></link>

    <

    script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

    var currentStyleSheet = 'stylesheet_a.css';

    $(document).ready(

    function(){

    $(

    "#button1").click(function(){

    //$("p").toggleClass("main");

    //$("body").toggleClass("main1");

    if(currentStyleSheet == 'stylesheet_a.css')

    currentStyleSheet =

    'stylesheet_b.css';

    else

    currentStyleSheet =

    'stylesheet_a.css';

    $(

    '#myStylesheet[rel=stylesheet]').attr('href', currentStyleSheet);

    return false;

    });

    });

    $(

    "#css_toggle").click(function() {

    var isOff = $("a").get(0).disabled;

    $(

    "a").get(0).disabled = !isOff;

    $(

    "b").get(0).disabled = isOff;

    });

    </

    script>

    <

    style type="text/css">

    .main

    {

    font-size

    :120%;

    color

    :green;

    }

    .main1

    {

    background-color

    :Red ;

    }

    </

    style>

    </

    head>

    <

    body>

    <form id="form1">

    <div>

    <input type="button" ID="button1" value="Button" type="submit"/>

    <p>This is another paragraph.</p>

    <input type="button" ID="css_toggle" value="Change css" type="submit"/>

    </div>

    </form>

    </

    body>

    </

    html>

  2. Please have a look