这里的选项卡下边界的白色怎么覆盖内容DIV上边界的颜色呢？
Justeasy
2018-01-31 17:20
求教，我做出来的选项卡#fff颜色无法覆盖DIV的上边界。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf_8"/>
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
#choices li{
font-size:14px;
display:inline-block;
border: solid 0.5px ;
border-color:#ccc;
width:55px;
height:30px;
text-align:center;
line-height:30px;
padding-right:8px;
padding-left:8px;
margin-bottom:0px;
border-bottom: #fff solid 0.5px;
}
#choices{
margin-bottom:0;
}
#div1{
border:solid #ccc 0.5px;
width:300px;
height:150px;
margin-top:;
position:relative;
left:35px;
border-top:saddlebrown solid 0.5px;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
var content = document.getElementsByTagName("div");
var choices = document.getElementById("choices").childNodes;
window.onload= function(){
}
function getChoice(obj){
// alert(content[0].innerHTML);
switch(obj.innerHTML){
case "房产" :
content[0].innerHTML=
"275万购昌平邻铁三居 总价20万买一居<br /> 200万内购五环三居 140万安家东三环<br/> 北京首现零首付楼盘 53万购东5环50平<br /> 京楼盘直降5000 中信府 公园楼王现房";
break;
case "家居":
content[0].innerHTML=
"40平出租屋大改造 美少女的混搭小窝<br/>经典清新简欧爱家 90平老房焕发新生<br />新中式的酷色温情 66平撞色活泼家居<br />瓷砖就像选好老婆 卫生间烟道的设计";
break;
case "二手房":
content[0].innerHTML=
" 通州豪华3居260万 二环稀缺2居250w甩<br />西3环通透2居290万 130万2居限量抢购<br />黄城根小学学区仅260万 121平70万抛!<br /独家别墅280万 苏州桥2居优惠价248万";
break;
default: alert("Can not get object!");
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<ul id="choices">
<li onmouseover="getChoice(this)">房产</li>
<li onmouseover="getChoice(this)">家居</li>
<li onmouseover="getChoice(this)">二手房</li>
</ul>
<div id="div1" >
</div>
<!--<input type="button" value="test" onclick="javascript:alert(content);">-->
</body>
</html>
3回答
-
- 慕沐3395912
- 2018-02-21 15:12:23
不过你的代码，我试了，div用了相对定位，怎么改ul的width都对不上。
-
- 慕沐3395912
- 2018-02-21 15:10:57
因为老师源代码里，div是没有border-top的，ul的border-bottom才是我们看到的那条红线，li的优先级比ul高，所以就可以遮挡住ul的border-bottom了
-
- 慕勒7123956
- 2018-02-01 10:24:53
上代码
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题