3

所以，由于我在为我的网站决定一个绝对主题时遇到问题，我想让用户从下拉菜单中选择一个主题，当点击一个选项时，它会改变背景图像、背景颜色和背景定位。

例如。如果用户选择“马里奥兄弟 3”主题，他们会得到

background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;

如果你选择“Zelda LTTP”主题，你会得到

background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;

我希望它出现在下拉菜单中，并让它记住您的选择，以便每次都适用。

我几乎不知道该怎么做，有人可以帮忙吗？

4

2 回答 2

9

我会按身体上的不同类别选择主题，如下所示：

body.smb2{
    background-image:url('smb3.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: #6899f8;
}
body.zelda{
    background-image:url('zeldalttp.jpg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: Black;
}

然后使用 javascript（或服务器端）设置 body 类并将选择保存在 cookie 中。

确切地说，将 css 放在 css 文件中，然后您可以像这样更改它：

HTML：

<select id="select">
    <option value=""></option>
    <option value="smb2">SMB 2</option>
    <option value="zelda">Zelda</option>
</select>

纯JS：

var sel = document.getElementById('select');
sel.onchange = function(){
    document.body.className = sel.value;
};

或者如果你喜欢jQuery ：

$('select').change(function(){
    $('body').prop('class',$(this).val());    
});

好的，您网站上的问题是，正文已经有很多其他类。并且 className 会覆盖所有这些。一种解决方案是保存旧类，然后像这样添加新类：

var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;
};

或 jQuery：

var currentclass = null;
$('select').change(function(){
    $('body').removeClass(currentclass).addClass($(this).val());
    currentclass = $(this).val();
});
于 2012-06-03T22:09:24.407 回答
0

如果您查看 WordPress 或众多留言板的主题架构，它们通常会根据用户选择提供单独的 css 文件。但是，如果您在两个主题的样式上有显着差异（即多于一行背景差异）以确保客户端不会收到多余的 css，那将是合理的。

如果差异很小，安迪的回答会很好。是的，将选择保存在 cookie 中- 这将允许即使没有在服务器上存储配置文件也可以保存他们的偏好，这意味着他们不必在每次访问该站点时重新选择正确的主题。

于 2012-06-03T23:05:34.137 回答