誰能幫我看看問題在哪
<!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>
2016-10-26
#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
2016-10-25
什么問題？