                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

点击之后的li下边框覆盖ul的下边框，为什么覆盖不了呢。

<!DOCTYPE html>

<html>

<head>

/* CSS样式制作 */

*{padding: 0px;margin: 0px;}

ul{background:gray;list-style: none;overflow: hidden;border-bottom: 2px solid darkred;height: 40px;}

#tab ul li{display:inline-block;border: 2px solid cornflowerblue;float:left;line-height:38px;margin: 0px 10px;border-bottom: none;}

#tab{width: 300px;padding: 10px;}

#tab div{border: 1px solid cornflowerblue;padding: 10px 5px;border-top: none;line-height: 30px;}

#tab ul li.on{border-top:3px solid darkred;border-bottom: 2px solid blue;}

.hide{display: none;}

</style>

// JS实现选项卡切换

window.onload=function(){

var otab=document.getElementById("tab");

var oul=otab.getElementsByTagName("ul")[0];

var oli=oul.getElementsByTagName("li");

var odiv=otab.getElementsByTagName("div");

for(var i=0;i<oli.length;i++){

oli[i].index=i;

oli[i].onclick=function(){

for(var j=0;j<oli.length;j++){

oli[j].className="";

odiv[j].className="hide"

}

this.className="on";

odiv[this.index].className=""

}

</script>

</head>

<body>

<ul>

</ul>

<div> 275万购昌平邻铁三居总价20万买一居<br>

200万内购五环三居 140万安家东三环<br>

北京首现零首付楼盘 53万购东5环50平<br>

京楼盘直降5000 中信府公园楼王现房<br></div>

<div class="hide"> 40平出租屋大改造美少女的混搭小窝<br>

经典清新简欧爱家 90平老房焕发新生<br>

新中式的酷色温情 66平撞色活泼家居<br>

瓷砖就像选好老婆卫生间烟道的设计<br></div>

<div class="hide">通州豪华3居260万二环稀缺2居250w甩<br>

西3环通透2居290万 130万2居限量抢购<br>

黄城根小学学区仅260万 121平70万抛!<br>

独家别墅280万苏州桥2居优惠价248万<br></div>

</div>

</body>

</html>

慕莱坞9426892

2019-10-09

源自：JavaScript进阶篇 10-1

关注问题我要回答

1141

操作

收起

2 回答

Gixgine
2019-10-12

你li的border，padding，margin先别设置，然后设置li的高度等于ul的高度，再设置border，子元素的超过父容器的部分会覆盖父容器，自己算其他数据如果你不想上边框也覆盖，随便问一下#tab ul li.on不是直接.on就行了吗类多的话再ul .on = =

1 回复有任何疑惑可以回复我~

收起回答

qq_慕慕947699
2019-10-11

  <style type="text/css">    
  /* CSS样式制作 */    
  * {      
  padding: 0px;      
  margin: 0px;    
  }    
  ul {      
  /* background: gray; 背景不要*/       
  list-style: none;      
  overflow: hidden;      
  /* border-bottom: 2px solid darkred; 下边框给div来写*/      
  height: 40px;    
  }    
  #tab ul li {      
  display: inline-block;      
  border: 2px solid cornflowerblue;      
  float: left;      
  line-height: 38px;      
  margin: 0px 10px;      
  border-bottom: none;    
  }    
  #tab {      
  width: 300px;      
  padding: 10px;    
  }    
  #tab div {            
  border: 1px solid cornflowerblue;            
  border-top: 2px solid darkred;/* 添加上边红色边框 */      
  padding: 10px 5px;      
  /* border-top: none; 去掉*/      
  line-height: 30px;      
  margin-top: -2px;    
  }    
  #tab ul li.on {      
  border-top: 2px solid darkred;      
  /* border-bottom: 2px solid blue; 去掉*/      
  position: relative;  /*定位*/    
  z-index: 1000;    /*调整层级*/
  }    
  /* 添加伪类白线盖住 */    
  #tab ul li.on::before {      
  content: '';      
  position: absolute;      
  height: 2px;      
  width: 100%;      
  background: #fff;      
  bottom: 0px;      
  left: 0;    
  }    
  .hide {      
  display: none;    
  }  
  </style>