Javascript 如何制作一个简单的jQuery按钮来切换元素'；背景_Javascript_Jquery_Html_Css

Javascript 如何制作一个简单的jQuery按钮来切换元素'；背景

javascript jquery html css

Javascript 如何制作一个简单的jQuery按钮来切换元素'；背景,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我知道可能没有比这更简单的了，但是嘿，我是个新手。我只想使用bgtokle类作为一个简单的状态更改按钮来更改metro类的背景色。我知道我使用了错误的方法，因为我尝试的是无效的。非常感谢您的帮助！提前谢谢 HTML: 我在jQuery上做了这样的尝试，当然没有达到预期的效果： $('.bgtoggle').toggle(function () { $(".metro").css('background', '#000'); }, function () { $(".metro")

我知道可能没有比这更简单的了，但是嘿，我是个新手。我只想使用

bgtokle

类作为一个简单的状态更改按钮来更改

metro

类的背景色。我知道我使用了错误的方法，因为我尝试的是无效的。非常感谢您的帮助！提前谢谢

HTML:

我在jQuery上做了这样的尝试，当然没有达到预期的效果：

$('.bgtoggle').toggle(function () {
    $(".metro").css('background', '#000');
}, function () {
    $(".metro")css('background', '#fff'));
}

我已经创建了一个按钮，基于你的CSS（除了我没有的背景图像），并使它改变身体的背景颜色，以提供一个非常视觉效果。我知道你可以拿着这个，用任何你喜欢的方式。需要注意的一点是，我在这里使用的是最新的jQuery版本，这意味着您需要使用

jQuery

，而不是

，如果您希望使用早期版本，可以将其更改回原来的版本

HTML

CSS

我注意到你开始时有一些语法错误（如果你是初学者，这很正常，没什么大不了的）。例如不检查文档（网页）是否准备就绪。我还考虑过，如果您想要一个按钮，您将需要一个on-click事件来表示按钮功能

如果您真的想通过悬停来实现这一点，请改用mouseover/mouseout：

我想您正在询问如何使用jQuery创建切换按钮，并且每当发生切换事件时，它都会执行操作，请查看下面的代码

<html>
<head>
<title>Toggle Button using Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="font-family:arial,sans-serif;font-weight:bold;font-size:.9em;">
<center>
<div class="metro" style="width:100;height:100;background-color: rgb(255,  255, 255);">To change Me</div>
<div class="bgtoggle" style="width:100;height:100;cursor:pointer;">Click Here</div>
<script>

$('.bgtoggle').click(function() {
   if ($('.metro').css('background-color')=="rgb(255, 255, 255)"){
       $('.metro').css('background-color', '#000');
   } else if ($('.metro').css('background-color')=="rgb(0, 0, 0)"){
       $('.metro').css('background-color', 'rgb(255, 255, 255)');
   }
});

</script>
</center>
</body>
</html>


使用Jquery切换按钮
改变我
点击这里
$（'.bgtoggle'）。单击（函数（）{
if（$（'.metro'）.css（'background-color'）=“rgb（255，255，255）”）{
$（'.metro'）.css（'background-color'，'#000'）；
}else if（$（'.metro'）.css（'background-color'）=“rgb（0,0,0）”）{
$（'.metro'）.css（'background-color'，'rgb（255,255,255'））；
}
});

祝你的项目好运

几年前，jQuery的

toggle（）

函数的该版本被弃用，并从jQuery中删除↑ ↑ ↑ 使用click代替，并处理Handler中的逻辑您希望它在单击时立即更改，还是希望永久状态更改？如果你只是暂时想要它，你可以使用：active pseudo class.ooh请举例是的，我希望它能够永久更改，直到再次单击为止听起来可能重复，让我为你修改小提琴，准备：）这是因为人们试图帮助，但他们没有努力解释，是的，我认为你是对的，这是一个耻辱，因为我确信他们是有能力的，也许一个好老师知道事情，一个伟大的老师不仅知道知识，而且还把信息联系起来；）说得很好，伙计，现在让我告诉你，如果这对你有帮助，如果它真的（比任何人都好）接受它，让子孙后代来解决这个问题！我想我可以这样评论，您需要将背景颜色更改为背景，然后为您的初始图像指定background:url（“…”），然后将其更改为background:“yellow”或其他与单击事件相关的内容。很高兴知道这对你有用

$('.bgtoggle').toggle(function () {
    $(".metro").css('background', '#000');
}, function () {
    $(".metro")css('background', '#fff'));
}

<div class="bgtoggle"></div>

jQuery(document).ready(function(){
    jQuery(".bgtoggle").click(function () {
        jQuery("body").toggleClass("bgcolor--yellow");
    });
});

body {
    /* set the background to whatever you like, I made it white in color */
    background-color: white;
}

.bgcolor--yellow {
    background-color: yellow;
}

jQuery(document).ready(function(){
    jQuery(".bgtoggle").mouseover(function () {
        jQuery("body").css("background-color", "yellow");
    });
    jQuery(".bgtoggle").mouseout(function () {
        jQuery("body").css("background-color", "white");
    });
});

<html>
<head>
<title>Toggle Button using Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="font-family:arial,sans-serif;font-weight:bold;font-size:.9em;">
<center>
<div class="metro" style="width:100;height:100;background-color: rgb(255,  255, 255);">To change Me</div>
<div class="bgtoggle" style="width:100;height:100;cursor:pointer;">Click Here</div>
<script>

$('.bgtoggle').click(function() {
   if ($('.metro').css('background-color')=="rgb(255, 255, 255)"){
       $('.metro').css('background-color', '#000');
   } else if ($('.metro').css('background-color')=="rgb(0, 0, 0)"){
       $('.metro').css('background-color', 'rgb(255, 255, 255)');
   }
});

</script>
</center>
</body>
</html>