誰(shuí)能幫我看看問(wèn)題在哪
<!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">房產(chǎn)</li>
? ?<li>家居</li>
? ?<li>二手房</li>
?</ul>
<div>
275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</br>
? ?200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</br>
? ?北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</br>
? ?京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩</br>
? ? 經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</br>
? ? 新中式的酷色溫情 66平撞色活潑家居</br>
? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
</div>
<div class="hide">
通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</br>
? ? 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</br>
? ? 黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</br>
? ? 獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
</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">房產(chǎn)</li>
? ?<li>家居</li>
? ?<li>二手房</li>
?</ul>
<div>
275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</br>
? ?200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</br>
? ?北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</br>
? ?京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩</br>
? ? 經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</br>
? ? 新中式的酷色溫情 66平撞色活潑家居</br>
? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
</div>
<div class="hide">
通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</br>
? ? 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</br>
? ? 黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</br>
? ? 獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
</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。用標(biāo)簽 li 蓋住 標(biāo)簽div
2016-10-25
什么問(wèn)題？