<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
?????*{margin=0;padding=0}
????ul{list-style:none;display:block;height:27px;?line-height:27px;}
????ul?li{list-style-type:none;float:left;border:1px?solid?#aaa;height:25px;width:60px;line-height:25px;margin:0px?3px;border-bottom:none;text-align:center;cursor:pointer;display:?inline-block;}
????#content{width:300px;height:100px;padding:0px;margin:0px;clear:both;}
????.on{height:120px;?line-height:25px;?border:1px?solid?#336699;border-top:2px?saddlebrown?solid;padding:?0px?5px;}?
????.hide{display:none;}
????#show{border-top:2px?saddlebrown?solid;border-bottom:2px?solid?#fff}??
????
????</style>
????<script?type="text/javascript">
????????window.onload=function()?{
????????????var?lis=document.getElementsByTagName("li");
????????????var?con=document.getElementById("content")
????????????for?(var?i=0;i<lis.length;i++){
????????????????lis[i].index?=?i;
????????????????lis[i].onclick()=function(){
????????????????????for(var?p=0;p<lis.length;p++){
????????????????????????lis[p].className="?";
????????????????????????con[p].className="hide";
????????????????????}
????????????????????this.className="show";
????????????????????con[this.index].className="on";
????????????????}
????????????}
????????}
????
????//?JS實現(xiàn)選項卡切換
????
????
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<ul>
????<li?id="show"?>房產(chǎn)</li>
????<li?>家居</li>
????<li?>二手房</li>
</ul>
<div?id="content">
????<div?class="on">
?????275萬購昌平鄰鐵三居?總價20萬買一居</br>
?????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)</br>
?????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</br>
?????京樓盤直降5000?中信府?公園樓王現(xiàn)房</br>???
????</div>
????<div?class="hide">?
?????40平出租屋大改造?美少女的混搭小窩</br>
?????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生</br>
?????新中式的酷色溫情?66平撞色活潑家居</br>
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設計</br>????
????</div>
????<div?class="hide">
?????通州豪華3居260萬?二環(huán)稀缺2居250w甩</br>
?????西3環(huán)通透2居290萬?130萬2居限量搶購</br>
?????黃城根小學學區(qū)僅260萬?121平70萬拋!</br>
?????獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬</br>????
????</div>
</div>
?
</body>
</html>顯示出來的樣式中，上面的標題行與下面的內(nèi)容行之間有很大的間隙，進行了一番搜索后在ul里加上了display：block，但仍然沒有效果。無法出現(xiàn)切換效果以上兩個問題，求解決，謝謝~
JS選項卡切換問題
慕哥0008349
2016-11-15 16:24:14