How to change secondary stylesheet with Jquery?

Question

I have my base.css and a red.css on my site.

I like do change red.css for blue.css when i press some button, without lost base.css how to do this? i have tried this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
    if($.cookie("css")) {
     $("link").attr("href",$.cookie("css"));
  }
$(document).ready(function(){  
    $("#troca_faccao").click(function() {
        $(this).parent().find("#painel_faccao").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).hover(function() {
        }, function(){  
            $(this).parent().find("#painel_faccao").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
            });
        })
    $("#painel_faccao li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
});
</script>

and div:

                        <div id="painel_faccao" style="display: none">
                        <p>A Escolha é Sua!</p>
                        <ul>
                            <li class="horda"><a href="#" rel="horde.css">HORDA</a></li> 
                            <li class="alianca"><a href="#" rel="aliance.css">ALIANÇA</a></li> 
                        </ul></div>

Answer 1

You can use :eq filter selector or eq() method to target the stylesheet you want:

$("link:eq(0)").attr("href",$(this).attr('rel'));

Specify the position to eq for the stylesheet you want to change the href. Off course you want to change the href of link stylesheet pointing to red.css and not base.css

---

Alternatively, you can apply an id to the link stylesheet you want to change the href ofL

<link id="someID"............/>

And later do:

$("link#someID").attr("href",$(this).attr('rel'));

Answer 2

http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

tl;dr:

Somewhere in your HTML:

<link id="styles" rel="stylesheet" type="text/css" href="red.css" /> in HTML

Somewhere in your jQuery:

$("#styles").attr("href","blue.css");