Question

我使用Divs和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;


}

Answer 1

标签div的高度仅为20px，这是深蓝色的填充。较浅的蓝色似乎是来自另一个元素渲染后面显示当前div改变颜色，可能b / c填充或边距设置。

例如，容器元素的填充正在影响第一个选项卡，因为它被父div的填充顶部向下推。

我建议使用Chrome devtools或FireFox / IE devtools将鼠标悬停在你的html元素上，然后查看影响它们的样式，以及它们盒子的实际几何形状。使调试这些东西更容易。

Answer 2

你可以玩CSS＆＃39;

padding-top
margin-top

代表tab和left_lane类。

我得到了一些几乎令人满意的结果，但我不是硬编码像素尺寸的粉丝。所以我会留给你。

Answer 3

如下所示，将“活动”类添加到“li”。还添加一个简单的CSS。 css代码也添加了。

HTML代码

<ul>
  <li><a href="http://sunporchhomes.com">HOME</a></li>
  <li class="active"><a href="/features-3" id="current">FEATURES</a></li>
  <li><a href="/floor-plan-2">FLOORPLAN</a> </li>
  <li><a href="/neighbourhood-3">NEIGHBOURHOOD</a></li>
  <li><a href="/warranty">WARRANTY</a></li>
  <li><a href="/faq-2">ROWHOME FAQ</a> </li>
  <li><a href="/about">ABOUT US</a></li>

CSS代码，

ul li.active { bacground: #ff0000; }

如何使我选择的标签更改颜色？

3 个答案: