Javascript 按下按钮时更改div的背景颜色_Javascript_Html_Css

Javascript 按下按钮时更改div的背景颜色
javascript html css
Javascript 按下按钮时更改div的背景颜色,javascript,html,css,Javascript,Html,Css,我正在设计UI&在这里我无法正确格式化它。有两件事我做不到：—— 左-1，左-2，左-3。。文本在文本的底部按钮图像。我想让它们出现在图片的右边为什么我每次按下左边的按钮都可以改变图像和文本所在位置的背景色（即左1 &左-2）是否已放置我怎么能忍受这一切代码：-- 正文，html{ 宽度：100%；身高：100%；保证金：0；填充：0；位置：相对位置； } .输入{ 显示：内联块；填充：0.2px； } .输入{ 显示：块； } .imgtxt{ 保证金：0；字体系列：
我正在设计UI&在这里我无法正确格式化它。
有两件事我做不到：——
左-1，左-2，左-3。。文本在文本的底部按钮图像。我想让它们出现在图片的右边
为什么我每次按下左边的按钮都可以改变图像和文本所在位置的背景色（即左1 &左-2）是否已放置
我怎么能忍受这一切
代码：--

正文，html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
位置：相对位置；
}
.输入{
显示：内联块；
填充：0.2px；
}
.输入{
显示：块；
}
.imgtxt{
保证金：0；
字体系列：arial；
颜色：#DDDFED；
字体大小：15px；
}
#图像{
背景色：#888686；
空白：nowrap；
}
可滚动分区{
宽度：100%；
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
div.scrollableMenu{
宽度：100%；
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
#菜单{
背景色：#292B3B；
位置：绝对位置；
顶部：124px；
底部：20px；
左：0；
宽度：200px；
}
#居中{
背景色：#eeeeee；
位置：绝对位置；
顶部：124px；
左：200px；
右：0px；
底部：20px；
}
#福特{
背景色：#CC99FF；
文本对齐：居中；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
}
小键盘

小键盘-1

小键盘-2

小键盘-3

小键盘-4

键盘-5

键盘-6

键盘-7

小键盘-8

键盘-9

小键盘-10

键盘-11

键盘-12

键盘-13

键盘-14

键盘-15

键盘-16

键盘-17

键盘-18

键盘-19

左-1

左-2

左-3

左-4

左-5

左-6

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}
.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}
#images {
    background-color:#888686;
    white-space:nowrap;
}
div.scrollable {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableMenu {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

#Menu {
    background-color:#292B3B;
    position:absolute;
    top:124px;
    bottom:20px;
    left:0;
    width:200px;
}
#center {
    background-color:#eeeeee;
    position:absolute;
    top:124px;
    left:200px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}
</style>
</head>

<body >


<body>
    <div id="images" class="scrollable">
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-1</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-2</p>
            <hr style="border-color:#DDDFED; background-color:#00FF00;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-3</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-4</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-5</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-6</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-7</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-8</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-9</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-10</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-11</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-12</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-13</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-14</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-15</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-16</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-17</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-18</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-19</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
    </div>
    <div id="Menu" class="scrollableMenu">
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" hspace="10"/>
            <p class="imgtxt" style="padding-left : 16px;">Left-1</p>
        </div >
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-2</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-3</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-4</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-5</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-6</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-7</p>
        </div>
        <hr/>
    </div>
    <div id="center">Table center</div>
    <div id="fotter">Copyright © 2014 My First Layout</div>
</body>

</body>
</html>

input {
float:left;
clear:both;
}

.imgtxt {
float:right;
}

$("button").clicked(function() {
    $("#Your-Div-to-change-color").css({'background':'#ddd'});
})

#menu > div > input {
  width:50%;
  float:left;
}

#menu > div > p.imgtxt {
  width:50%;
  float:left;
}

#menu > div:after {
  clear:both;
}   

#menu  hr {
  clear:both;
}

$('.input input').click(function (){
  $(this).parent().addClass('selected');

});

.input.selected{
  background-color: pink;
}

    <h1>Title</h1>
    <p> Hello </p>