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;
}
탭 div의 높이는 20px에 불과하며 더 진한 파란색으로 채워집니다. 밝은 파란색은 앞쪽 div가 색상을 변경할 때 나타나는 다른 요소 렌더링에서 나오는 것처럼 보입니다. 아마도 패딩 또는 여백 설정의 b / c 일 것입니다.
예를 들어 컨테이너 요소의 패딩은 상위 div의 패딩 상단에 의해 아래로 밀려나 가기 때문에 첫 번째 탭에 영향을줍니다.
Chrome devtools 또는 FireFox / IE devtools를 사용하여 html 요소 위로 마우스를 가져 가서 어떤 스타일이 영향을 미치는지, 상자의 실제 형상이 무엇인지 살펴볼 것을 제안합니다. 이 물건을 훨씬 쉽게 디버깅 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다