javascript - 如何使用jQuery在特定CSS文件之间切换？

为了切换主题，我使用下面的脚本，该脚本放置一个cookie并选择一个特定的CSS文件。

if($.cookie("css")) {
    $("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
    $("#layout li a").click(function() {
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});

结合以下链接：

<ul id="layout" class="PanelInfo">
    <li><a href="#" rel="/themes/bootstrap/design/style.css">Default style</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_bootstrap.css">Bootstrap</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_cerulean.css">Cerulean</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_cosmo.css">Cosmo</a></li>
</ul>

问题在于它只加载一个CSS文件。只能在几个CSS文件中切换，例如：
style.css，custom_bootstrap.css，custom_cerulean.css和custom_cosmo.css

所有其他CSS文件均不应更改。现在的情况是它禁用了所有其他CSS文件。
如何使用脚本实现此目的？

最佳答案

这个问题尚不完全清楚，但我猜你有几个

`<link href="....`

页面上的元素？一个包含您要在其中切换值的控件，另一个包含不应更改的控件？

如果是这样，那么我认为您的问题是您的jQuery选择器正在选择页面上的所有“ link”元素，并将所有URL都修改为同一件事：

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

相反，您需要选择要更改的链接的特定ID，如下所示：

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

其中SwitchLink是特定<link>元素的ID