我已经使用 Div 和 CSS 创建了一个选项卡菜单,我想知道如何让选定的选项卡改变颜色?我假设它会通过使 .tab 的背景颜色不同,但由于某种原因它只适用于一半的选项卡......参见此处:http://www.sunporchhomes.com/features-3
有人知道这是为什么吗?请参阅下面的代码。
Features.html
<div class="tabcontent">
<div class="left_lane float">
<div class="tab blu" id="t1">INTERIORS</div><br>
<div class="tab" id="t2">BATHROOMS</div><br>
<div class="tab" id="t3">KITCHEN</div><br>
<div class="tab" id="t4">EXTRAS</div><br>
</div>
.CSS
.tabcontent {
position: absolute;
padding-top:35px;
padding-left:485px;
width: 600px; !important /*HOLD TABS AND CONTENT*/
z-index:205;
height:300px;
}
.left_lane {
border-right: 2px #ffffff solid;
padding-right: 0px;
width:100px;
font-family: Trebuchet MS;
color:#ffffff;
background-color:#6cc7df;
height:176px;
font-size:14px;
}
.right {
background-color:#0ba8cb;
width:410;
height:500;
}
.float {
float: left;
padding-left:0px;
padding-top:10px;
}
.tab {
height:20px;
padding-left:8px;
border-bottom: 2px #FFF solid;
}
.tab #active {
}
.cnt {
display: none;
font-family: Trebuchet MS;
font-size:14px;
color:#ffffff;
padding-left: 10px;
padding-right:10px;
}
#c1 {
display: block;
}
.clear {
clear: left;
}
.blu {
color: #ffffff;
background-color:#0ba8cb;
}
最佳答案
选项卡 div 的高度只有 20px,这是用深蓝色填充的高度。较浅的蓝色似乎来自另一个呈现在后面的元素,当前面的 div 改变颜色时,它最终会显示出来,可能是填充或边距设置的 b/c。
例如,容器元素的内边距会影响第一个选项卡,因为它被父 div 的内边距向下推。
我建议使用 Chrome devtools 或 FireFox/IE devtools 将鼠标悬停在您的 html 元素上并查看影响它们的样式以及它们框的实际几何形状。使调试这些东西更容易。
关于html - 如何让我选择的标签改变颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24502385/