Question

我目前有一个主题可以在两个主要样式表之间切换。

设计中有一个单独的元素无法使用CSS进行风格改变，因此我决定使用适当的颜色切换两个不同版本之间的可见性。（它是通过javascript加载的标签云;一个版本匹配第一个主题的颜色，另一个版本匹配其他主题的颜色。）这是我添加的非常简单的代码面板开关：

$(function(){
    $('#pink').click(function(){
        $('#pinkcloud').show("fold");
        $('#greencloud').hide("fold");
     });
    $('#green').click(function(){
        $('#greencloud').show("fold");
        $('#pinkcloud').hide("fold");
    });
});

（#Green和#pink是对应于单击以更改主题的链接的ID。）

问题是，主题在Cookie上运行，因此它会记住您选择的主题。 div显然没有，所以无论你的浏览器记得什么主题，默认值都会自动加载。

我将如何添加到我的代码中以确保浏览器检查哪个样式表处于活动状态并在加载时显示正确的div？如何在我的javascript中检查它当前正在阅读哪个文件？

我有时会解释一些事情，所以这就是主题所以你实际上可以看到我的意思（x）。要查看问题，请单击绿色主题选项，刷新页面，然后查看剪切部分，该部分将为粉红色。您可以再次单击绿色主题选项以显示正确着色的部分，但我显然喜欢自动显示的正确部分。

主题切换的代码位于here，因此您可以看到它的工作原理。

Answer 1

您必须在页面加载和点击事件上运行该代码。你的＆＃34;＃pinkcloud＆＃34;元素是默认显示的元素，因此您只需通过向＆＃34; switchStylestyle＆＃34;添加类似的内容来更改为绿色样式。功能：

if(styleName==='green') { 
    $('#greencloud').show();
    $('#pinkcloud').hide(); 
}

Answer 2

是的，您需要在可以在样式表之间切换的cookie中存储一些值，以便可以保留信息。

所以，我的工作可能很粗糙，需要进行一些测试，但首先我会使用一个非常好的，轻量级的cookie插件HERE

然后你需要一些jquery：

$(window).on('load',function(){
   $.cookie('cookieName', 'green', { path: '/', expires: 365}); // set as the default on the root document for 1 year. 
});

$(document).ready(function(){
   $('#pink').click(function(){
      $.cookie('cookieName', 'pink', { path: '/', expires: 365}); // set on click
   });
   $('#green').click(function(){
      $.cookie('cookieName', 'green', { path: '/', expires: 365}); // reset to original
   });
});

然后我会在文档的头部添加一个样式表并给它一个id。

<link id="cssToggle" rel="stylesheet" type="text/css" href="http://yoursite.com/css/green-style.css" />

然后你需要一个if语句来切换它们。

if ($.cookie('cookieName') === 'green') {
   $('#cssToggle').attr('href','http://yoursite.com/css/green-style.css')
}else if($.cookie('cookieName') === 'pink'){
   $('#cssToggle').attr('href','http://yoursite.com/css/pink-style.css')
}

我可能已经完全过度了，可能会有更优雅的解决方案，但我相信这会有效。我打算尝试测试一下。

编辑：在这里工作的原始示例：http://jsfiddle.net/6eqs428v/

检查哪个样式表处于活动状态并隐藏div

2 个答案: