我正在使用我为 jquery 样式表切换器找到的代码。
从这里：http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
现在我在使用这个切换器时遇到了问题。
我正在尝试使用它来加载主题 css 文件，同时保持我的主 css 文件加载。
我的主 css 文件包含我的网站结构，无论如何我都想保持这个文件加载。
现在我正在尝试使用此切换器为网站加载备用颜色主题。唯一的问题是我的主 css 文件正在被卸载并被颜色主题替换。
我怎样才能拥有一个不变的主 css 文件，并且让这个切换器只影响我的主题 css 文件？
谢谢
【问题讨论】：
标签： jquery css themes stylesheet switch-statement
该文章中的第一个脚本替换了 all <link> 元素中的样式表。您需要指定要更改的<link>（如该文章中使用类来区分的第二个示例）。
例如：
<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>
【讨论】：
您需要稍微更改样式表切换器的 Javascript 文件/代码和您的标记
在您的 html 文件部分中包含这些行
<link rel="stylesheet" type="text/css" href="main-stylesheet.css"/>
<link rel="stylesheet" type="text/css" id="alt_style" href=""/>
将 main-stylesheet.css 替换为您的主样式表。另一个空链接标记将用于备用样式表。改用这个 Javascript 函数：
$(document).ready(function() {
$("#nav li a").click(function() {
$("link#alt_style").attr("href",$(this).attr('rel'));
return false;
});
});
这应该可以解决问题。 :)
【讨论】：
样式表提供了一种默认方式来执行此操作。所以你不想在dom中添加/删除样式节点，或者弄乱href。这种默认方式是 rel="alternate stylesheet"。任何带有“alternate”的东西都由客户端下载，而不是应用。所有浏览器都支持这一点，而且它已经存在很长时间了。
您可以添加一个类或其他 html 属性（我使用了 group="foo"、group="bar"）来表示只能应用一个样式表的逻辑分组。关闭样式表的方法是将样式表节点的disabled 属性更改为“true”。并且打开它的方式是disabled=False。不要更改 rel 属性中的“alternate”。
【讨论】：