个人中心
gpt4 book ai didi

使用 jquery 的 HTML 页面选项

转载 作者：行者123 更新时间：2023-11-28 13:25:09 27 4
gpt4 key购买 nike

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

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

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

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

谢谢。

最佳答案

你可以这样做，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 来存储所选主题，从它的外观来看，它总是加载黄色主题，然后一些 onload JS 检查 cookie 中的值并改变颜色。 Here是一些使用 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 启动并改变颜色之前有明显的延迟。

关于使用 jquery 的 HTML 页面选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14089309/

27 4 0
文章推荐： jquery - 如何使 jQuery css 影响即将到来的元素
文章推荐： html - 如何使文本变粗并使用 css 填充颜色，并在悬停时更改颜色
文章推荐： javascript - 无法显示 JSON 错误 - TypeError : document. getElementById(...) 为 null
文章推荐： css - 如何让一个 div 扩展到其可变高度的父 div 的整个高度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com