按下按钮时更改div的背景颜色
我正在设计一个UI＆amp;在这里我无法正确格式化。
我无法做的两件事： -
- left-1，left-2，left-3 ..文本正在底部 按钮图像。我希望他们来到图像的右边？
- 当我按下左边的按钮时，可以改变 背景颜色的图像＆amp;文本（即左-1） ＆安培; left-2）被放置了？
我怎样才能这样做。
代码： -
<!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>
4 个答案:
答案 0 :(得分：0)
第1部分：要将文字放在右侧，您可以使用float的{{1}}属性
第2部分，如果要更改颜色，您可以使用例如css。
代码（我没有使用正确的标识符。只是提供了解决问题的基本知识...... ）
第1部分的Css代码：
Jquery第2部分的Jquery代码：
input {
float:left;
clear:both;
}
.imgtxt {
float:right;
}
答案 1 :(得分：0)
对于left-1，left-2，left-3 .. text ...
简单地浮动物品。 For Instance为图像或其他容器分配宽度[如果你使用]并且还浮动文本.....记住宽度.....并且在文本后也要清除浮动元素。
例如
#menu > div > input {
width:50%;
float:left;
}
[或适合你的自己，但不要留下图像和宽度;文本beyound 100％]
#menu > div > p.imgtxt {
width:50%;
float:left;
}
#menu > div:after {
clear:both;
}
OR
#menu hr {
clear:both;
}
答案 2 :(得分：0)
您可以使用jquerys parent method来获取被点击的节点。像这样添加一个css类
JS
$('.input input').click(function (){
$(this).parent().addClass('selected');
});
CSS
.input.selected{
background-color: pink;
}
答案 3 :(得分：0)
当其他人回答我的建议时，我想我会发布一些有用的东西。
除<DIV>和<SPAN>以外的所有标记都会自动返回。
示例：
<h1>Title</h1>
<p> Hello </p>
Hello字样始终位于标题下方，因为<br />
<H1>
在CSS中使用Float:可以避免这种情况发生。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？