Come cambiare foglio di stile secondario con Jquery?

Question

Ho il mio base.css e un red.css sul mio sito.

Mi piace cambiare red.css per blue.css quando premo un pulsante, senza perdere base.css come fare? Ho provato questo:

<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> 

e 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

È possibile utilizzare :eq selettore di filtro o eq() metodo per indirizzare il foglio di stile che si desidera:

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

Specificare la posizione su eq per il foglio di stile che si desidera modificare href. Fuori rotta che si desidera modificare il href di collegamento foglio di stile che punta al red.css e non base.css

---

In alternativa, è possibile applicare un id al foglio di stile collegamento che si desidera modificare il href di L

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

E successivamente fare:

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

Answer 2

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

tl; dr:

Da qualche parte nel codice HTML:

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

qualche parte nel vostro jQuery:

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