jquery 样式表切换器 - 如何仅影响主题 css？

Question

我正在使用我为 jquery 样式表切换器找到的代码。

从这里： http://www.cssnewbie.com/simple-jquery-stylesheet-switcher /

现在我在使用这个切换器时遇到了问题。

我正在尝试使用它来加载主题 css 文件，同时保持加载主 css 文件。

我的主 css 文件包含我的网站结构，无论如何我都希望保持此文件的加载。

现在我尝试使用此切换器加载网站的替代颜色主题。唯一的问题是我的主 css 文件正在被卸载并被颜色主题替换。

我怎样才能拥有一个不改变的主CSS文件，并且让这个切换器只影响我的主题CSS文件？

谢谢

Answer 1

该文章中的第一个脚本替换了所有 元素中的样式表。您需要指定要更改的 （如该文章中的第二个示例，它使用类来区分）。

例如：

<link rel="stylesheet" type="text/css" href="main.css" />
<link class="theme" rel="stylesheet" type="text/css" href="theme1.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
if($.cookie("css")) {
    $("link.theme").attr("href",$.cookie("css"));
}
$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link.theme").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});
</script>

Answer 2

您需要更改样式表切换器的Javascript文件/代码，并且您的标记

将这些行包含在您的html文件部分中，

<link rel="stylesheet" type="text/css" href="main-stylesheet.css"/>
<link rel="stylesheet" type="text/css" id="alt_style" href=""/>

将 ma​​in-stylesheet.css 替换为您的主样式表。另一个空链接标记将用于备用样式表。使用这个 Javascript 函数来代替：

$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link#alt_style").attr("href",$(this).attr('rel'));
        return false;
    });
});

这应该可以解决问题。 :)

Answer 3

样式表提供了执行此操作的默认方法。所以你不想在 dom 中添加/删除样式节点，或者弄乱 href。这种默认方式是 rel="alternate stylesheet"。任何带有“alternate”的内容都是由客户端下载的，并且不会应用。所有浏览器都支持这一点，并且它已经存在很长时间了。

您可以添加一个类或其他 html 属性（我使用了 group="foo"、group="bar"）来表示只能应用一个样式表的逻辑分组。关闭样式表的方法是将样式表节点的 disabled 属性更改为“true”。而开启的方式，是disabled=False。不要更改 rel 属性中的“alternate”。