Làm cách nào để thay đổi biểu định kiểu phụ bằng Jquery?

Question

Tôi có base.css và red.css trên trang web của mình.

Tôi thích thay đổi red.css cho blue.css khi tôi nhấn một số nút, mà không bị mất base.css cách thực hiện việc này? tôi đã cố gắng này:

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

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

Bạn có thể sử dụng :eq lọc selector hoặc eq() phương pháp nhắm mục tiêu stylesheet bạn muốn:

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

Chỉ định vị trí cho eq cho biểu định kiểu mà bạn muốn thay đổi href. Tắt tất nhiên bạn muốn thay đổi href liên kết stylesheet trỏ đến red.css và không base.css

---

Ngoài ra, bạn có thể áp dụng một id để liên kết stylesheet bạn muốn thay đổi href ofL

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

Và sau đó làm:

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

Answer 2

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

tl; dr:

Một nơi nào đó trong HTML của bạn:

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

Một nơi nào đó trong jQuery của bạn:

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