谁能帮我看看问题在哪
来源：10-1 编程挑战
慕圣2809978
2016-10-25 12:12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO</title>
</head>
<style type="text/css">
*{
padding:0;
margin:0}
#active{
width:350px; height:200px; padding:5px; margin:20px;
}
#active ul{
list-style:none;
display:block;
height:36px;
line-height:30px;
}
#active ul li{
list-style:none;
float:left;
width:60px;
height:20px;
line-height:28px;
text-align:center;
display:inline-block;
border:2px solid #CCC;
border-bottom: none;
padding:5px;
margin:0px 10px ;
cursor: pointer;
background:#fff;
}
#active ul li.on{
border-top:3px solid red;
border-bottom:3px solid #fff;
}
#active div{
border:2px solid #0FF;
border-top: 3px solid red;
font-size:20px;
line-height:30px;
width:350px;
}
.show{
display: block ;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName('li');
var aDiv=document.getElementById('active');
var oDiv=aDiv.getElementsByTagName('div');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for(var j=0;j<oLi.length;j++){
oLi[j].className="";
oDiv[j].className="hide";
}
this.className='on';
oDiv[this.index].className="show";
}
}
}
</script>
<body>
<div id="active">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居</br>
200万内购五环三居 140万安家东三环</br>
北京首现零首付楼盘 53万购东5环50平</br>
京楼盘直降5000 中信府 公园楼王现房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝</br>
经典清新简欧爱家 90平老房焕发新生</br>
新中式的酷色温情 66平撞色活泼家居</br>
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩</br>
西3环通透2居290万 130万2居限量抢购</br>
黄城根小学学区仅260万 121平70万抛!</br>
独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO</title>
</head>
<style type="text/css">
*{
padding:0;
margin:0}
#active{
width:350px; height:200px; padding:5px; margin:20px;
}
#active ul{
list-style:none;
display:block;
height:36px;
line-height:30px;
}
#active ul li{
list-style:none;
float:left;
width:60px;
height:20px;
line-height:28px;
text-align:center;
display:inline-block;
border:2px solid #CCC;
border-bottom: none;
padding:5px;
margin:0px 10px ;
cursor: pointer;
background:#fff;
}
#active ul li.on{
border-top:3px solid red;
border-bottom:3px solid #fff;
}
#active div{
border:2px solid #0FF;
border-top: 3px solid red;
font-size:20px;
line-height:30px;
width:350px;
}
.show{
display: block ;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName('li');
var aDiv=document.getElementById('active');
var oDiv=aDiv.getElementsByTagName('div');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for(var j=0;j<oLi.length;j++){
oLi[j].className="";
oDiv[j].className="hide";
}
this.className='on';
oDiv[this.index].className="show";
}
}
}
</script>
<body>
<div id="active">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居</br>
200万内购五环三居 140万安家东三环</br>
北京首现零首付楼盘 53万购东5环50平</br>
京楼盘直降5000 中信府 公园楼王现房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝</br>
经典清新简欧爱家 90平老房焕发新生</br>
新中式的酷色温情 66平撞色活泼家居</br>
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩</br>
西3环通透2居290万 130万2居限量抢购</br>
黄城根小学学区仅260万 121平70万抛!</br>
独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</body>
</html>
写回答
关注
2回答
-
- qq_說些什庅_0
- 2016-10-26 15:50:52
#active ul li{
list-style:none;
float:left;
width:60px;
height:20px;
line-height:28px;
text-align:center;
display:inline-block;
border:2px solid #CCC;
border-bottom: none;
padding:5px;
margin:0px 10px ;
cursor: pointer;
background:#fff;
}其中的height改为23px。用标签 li 盖住 标签div
-
- 檬_4027726
- 2016-10-25 12:42:44
什么问题？
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468781 学习 · 22507 问题
相似问题