文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >按下按钮时改变div的背景颜色

问按下按钮时改变div的背景颜色
EN

Stack Overflow用户
提问于 2014-03-20 11:58:37
回答 4查看 243关注 0票数 0

我正在设计一个UI &在这里，我无法正确地格式化它。

我不能做两件事:--

  1. 左1左2左3 .文本开始于按钮图像的底部。我要他们在影像的右边？
  2. 无论我按左边的按钮，是否可以改变放置图片和文字的背景颜色(即左-1和左-2)？

我怎么能喝得起这个。

代码:--

代码语言：javascript
复制
<!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>

​

​

javascript
html
css
EN

回答 4

Stack Overflow用户

发布于 2014-03-20 12:08:27

第1部分：将文本放置在右边，可以使用css的float属性

第2部分：，为了更改颜色，可以使用Jquery。

Code(I没有使用正确的标识符。只是给出一个基本的想法什么可以解决你的issues...)

第1部分的Css代码：

代码语言：javascript
复制
input {
float:left;
clear:both;
}

.imgtxt {
float:right;
}

第2部分的Jquery代码：

代码语言：javascript
复制
$("button").clicked(function() {
    $("#Your-Div-to-change-color").css({'background':'#ddd'});
})
票数 0
EN

Stack Overflow用户

发布于 2014-03-20 12:09:25

左1左2左3 .短信..。

只要把东西浮起来。例如，为图像或其他容器指定宽度(如果任何u使用的话)，并将文本.....Keep放在心上的宽度.并在文本之后执行清楚的float元素。

例如

代码语言：javascript
复制
#menu > div > input {
  width:50%;
  float:left;
}

或者适合你自己，但不要留下图像的宽度&文本超过100%

代码语言：javascript
复制
#menu > div > p.imgtxt {
  width:50%;
  float:left;
}

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

或

代码语言：javascript
复制
#menu  hr {
  clear:both;
}
票数 0
EN

Stack Overflow用户

发布于 2014-03-20 12:13:35

您可以使用jquerys 母系法来获取单击的节点。添加如下的css类

JS

代码语言：javascript
复制
$('.input input').click(function (){
  $(this).parent().addClass('selected');

});

CSS

代码语言：javascript
复制
.input.selected{
  background-color: pink;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/22532266

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档