制作按钮切换背景

比方说，我有以下的HTML代码：制作按钮切换背景

<html> 
    <body> 
    <button id="one">Button 1</button> 
    <button id="two">Button 2</button> 
    <button id="reset">Reset</button> 
    </body> 
</html>

我怎样才能使按钮从白色变成背景色为绿色或白色到红色，并点击复位时使其改变背景颜色回到白色？

来源

2017-04-25 James Estes

使用JS。你的问题标签只有HTML和CSS。这是只能通过CSS来完成吗？ – andreim

有一个CSS唯一方法，但使用它，我不会建议。你需要有一个div来占用整个主体，并包含你所有的内容，并有单选按钮来存储当前状态。

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
[name=color] { 
 
    display: none; 
 
} 
 

 
#green[name=color]:checked~.background { 
 
    background: green; 
 
} 
 

 
#red[name=color]:checked~.background { 
 
    background: red; 
 
} 
 

 
#white[name=color]:checked~.background { 
 
    background: white; 
 
} 
 

 
.background { 
 
    height: 100%; 
 
    width: 100% 
 
} 
 

 
.button { 
 
    background-color: buttonface; 
 
    padding: 2px 6px 3px; 
 
    border-width: 2px; 
 
    border-style: outset; 
 
    border-color: buttonface; 
 
} 
 

 
.button:active { 
 
    border-style: inset 
 
}

<input type="radio" name="color" id="green"> 
 
<input type="radio" name="color" id="red"> 
 
<input type="radio" name="color" id="white"> 
 

 
<div class="background"> 
 
    <label class="button" for="green">Green</label> 
 
    <label class="button" for="red">Red</label> 
 
    <label class="button" for="white">White</label> 
 
</div>

这仅仅是一个基本的实现，使之可行，你不得不把一些唱段的东西，使之符合A11Y。

来源

2017-07-13 11:11:28

谢谢你的帮助和遗憾，我一直没有去。 –

不知道你想要的复位按钮，但这里一个jQuery脚本，将做的工作：

$("#one").click(function() { 
 
    $("body").css("background-color", "green"); 
 
}); 
 

 
$("#two").click(function() { 
 
    $("body").css("background-color", "red"); 
 
}); 
 

 
$("#reset").click(function() { 
 
    $("body").css("background-color", "white"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="one">Button 1</button> 
 
<button id="two">Button 2</button> 
 
<button id="reset">Reset</button>

你不能做你想做的纯CSS

这里是一个工作小提琴：

https://jsfiddle.net/u66yann6/16/

来源

2017-04-25 14:48:04

OP没有特别要求jquery。可能是最好不要使用它 –

@PriyeshKumar问题编辑 –

[像这样？]（https://jsfiddle.net/bpsjns1a/） – Sank6

<button data-color="blue">Button 1</button> 
<button data-color="red">Button 2</button> 
<button data-color="white">Reset</button> 

... 


$('[data-color]').click(function(){ 
    var color = $(this).data('color'); 
    $('body').css('background-color',color); 
});

ultimate。

jsfiddle.net/u66yann6/17

来源

2017-04-25 15:11:01 pirs

它现在工作。谢谢！ –

尝试新的脚本，并享受！不要忘了接受它:)）= – pirs

你的脚本不起作用@Pirs和Baptiste Arnaud已经给了我一个工作代码 –

制作按钮切换背景

回答

相关问题