所用技术有:css选择器 + ~
相邻兄弟选择器+ element + element 用于选取第一个指定的元素之后的紧跟的元素,该元素是被选取元素的兄弟(不是内部)
~ element1~element2 它可以element1之后所有的element2 . 两元素必须拥有相同父元素,但是element2不必直接紧随element1.
HTML:
<div id="content-middle">
<div id="content-menu">
<ul>
<li class="li-1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">tab-1</label>
<div id="tab-content1" class="tab-content">
111
</div>
<i class="icon-user"></i>
</li>
<li class="li-2">
<input type="radio" checked="checked" id="radio2" name="radio" /><label for="radio2">tab-2</label>
<div id="tab-content2" class="tab-content">
222
</div>
</li>
<li class="li-2">
<input type="radio" id="radio3" name="radio" /><label for="radio3">tab-3</label>
<div id="tab-content3" class="tab-content">
333
</div>
</li>
</ul>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
#content-middle {
width: 850px;
height: 300px;
margin: 0 auto;
margin-top: 30px;
border: 1px solid gainsboro;
}
#content-menu {
width: 100%;
height: 38px;
border-bottom: 1px solid gainsboro;
}
#content-menu ul li {
list-style: none;
float: left;
text-align: center;
line-height: 38px;
cursor: pointer;
}
#content-menu ul li:hover {
background-color: gainsboro;
}
#content-menu input[type="radio"] {
display: none;
}
#content-menu input[type="radio"]+ label {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
#content-menu input[type="radio"]:checked+ label {
display: block;
width: 100%;
height: 100%;
background: #9a9da2;
color: white;
}
#content-menu input[type="radio"]:checked~ [id^="tab-content"] {
display: block;
}
/*~ e1~e2 选择相同父元素下 前面是e1的e2元素*/
#content-menu input[type="radio"]:checked~ .icon-user {
background-position: -44px -56px;
}
.li-1 {
width: 120px;
height: 38px;
}
.li-2 {
width: 80px;
height: 38px;
}
.tab-content {
position: absolute;
top: 100px;
left: -150px;
width: 850px;
height: 138px;
display: none;
}
效果预览: