如何使用Jquery更改次要样式表？

Question

我在我的网站上有base.css和red.css两个文件。

当我按下某个按钮时，我想将red.css更改为blue.css，同时保留base.css。请问如何实现？我尝试过以下方法：

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

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

- Preston

Answer 1

您可以使用:eq过滤选择器或eq()方法来定位您想要的样式表：

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

指定要更改 href 的样式表的位置为 eq。当然，您想更改指向 red.css 而不是 base.css 的链接样式表的 href。

---

或者，您可以将 id 应用于要更改 href 的链接样式表。

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

然后执行：

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

- Sarfraz

---

哇..太棒了!!..我使用了你的替代答案，BINGO！完美地运行了!..谢谢你，伙计!!! - Preston

Answer 2

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

简而言之：

在你的 HTML 中的某处：

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

在你的jQuery中：

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

- GSP