1

我正在尝试创建一个 html 页面选项。这个选项菜单是一个在悬停或点击时出现的面板，从那里我可以更改颜色、背景图案等，我认为这是在更改 css 文件或者它正在做其他事情，但我不知道怎么做。我试图在谷歌上找到一些东西，但我没有。

如果您不明白我在寻找什么，请查看此页面，将鼠标悬停在“+”按钮上，您就会看到。 http://themes.fbpixel.com/?theme=Landisimo%20-%20Landing%20Page

编辑：如果有人知道已经为此类事情完成的 jquery 插件，请提交链接。

EDIT2：我真正想要的是一个插件，它保留我所做的属性更改，当我转到另一个网站页面时，颜色是我在第一页上选择的颜色。一个例子是：我的主页是红色的，我从面板选项中选择蓝色，当我进入博客页面时，该页面上的颜色为蓝色（我在上一页中选择的颜色）。

谢谢你。

4

1 回答 1

2

你可以做这样的事情，HTML：

<body class="red">
    <p>Some text</p>
    <a href="#" id="paint-blue">paint blue</a>
    <a href="#" id="paint-red">paint red</a>
</body>

CSS：

body.red {
    background-color: red;
}

body.red p {
    color: yellow;
}

body.blue {
    background-color: blue;
}

body.blue p {
    color: white;
}
/* Some more stuff */

JS：

$("#paint-blue").click(function(event) {
    event.preventDefault();
    $("body").removeClass("red").addClass("blue");
}

$("#paint-red").click(function(event) {
    event.preventDefault();
    $("body").removeClass("blue").addClass("red");
}

这个想法是，根据顶级body元素的类，页面上的某些元素的样式会有所不同。

编辑：您链接到的示例页面使用 cookie 存储所选主题，从外观上看，它总是加载黄色主题，然后一些onloadJS 检查 cookie 中的值并更改颜色。 这是一些使用 JS 设置和读取 cookie 的随机教程。事情onload看起来像：

$(document).ready(function() {
    // Should be easy to write if you look at the tutorial
    var colour = getColourFromCookie();
    if (colour == 'blue') {
        $("#paint-blue").click();
    }
    // red is default, no need to do anything
});

您可以比示例站点做得更好的一件事是，您可以根据 cookie 值呈现不同的页面（不同的正文类），而不是总是呈现一个版本然后在客户端更改它 - 至少在我的计算机上有在 JS 启动并更改颜色之前有明显的延迟。

于 2012-12-30T09:04:39.413 回答