Question

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

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

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

我正在尝试将此加载主题css文件，同时保持我的主css文件已加载。

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

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

如何让一个主要的css文件不会改变，让这个切换器只影响我的主题css文件？

感谢

Answer 1

该文章中的第一个脚本替换了所有 <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>

Answer 2

您需要更改样式表切换器的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;
    });
});

这应该可以解决问题。：）

Answer 3

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

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

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

3 个答案: