大佬們 我這有啥問題嗎 感謝
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? *{padding:0px; margin:0px; font:12px normal "microsoft yahei";}
? ? #tabs {width:290px; padding:5px; height:150px; margin:20px;}
? ? #tabs ul{list-style:none; display:block; height:30px; line-height:30px; border-bottom:2px saddlebrown solid;}
? ? #tab ul li{background:#fff; cursor:pointer; float:left; list-style:none; height:28px; line-height:28px; margin:0px 3px; border:1px solid #aaa; border-bottom:none; display:inline-block; width:60px; text-align:center;}
? ? #tabs ul li.on{border-top:2px saddlebrown solid; border-bottom:2px solid #fff;}
? ? #tabs div{height:120px; line-height:25px; border:1px #336699 solid; border-top:none; padding:5px;}
? ? #tabs div.hide{display:none;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? window.onload = function(){
? ? ? ? var tabs = document.getElementsById("tabs");
? ? ? ? var Ul = document.getElementsByTagName("ul")[0];
? ? ? ? var Li = document.getElementsByTagName("li");
? ? ? ? var Div = document.getElementsByTagName("div");
? ? ? ? for(var i=0;i<Li.length;i++){
? ? ? ? ? ? Li[i].index=i;
? ? ? ? ? ? Li[i].onclick=function(){
? ? ? ? ? ? ? ? for(var n=0;n<Li.length;n++){
? ? ? ? ? ? ? ? ? ? Li[i].className="";
? ? ? ? ? ? ? ? ? ? Div[i].className="hide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className="on";
? ? ? ? ? ? ? ? Div[this.index].className="";
? ? ? ? }
? ? }
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabs">
? ? <ul>
? ? ? ? <li class="on">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? ? ? 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)生間煙道的設(shè)計<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>
2020-08-04
#tabs?ul?li?.on{border-top:2px?saddlebrown?solid;?border-bottom:2px?solid?#fff;}初學者經(jīng)常犯的錯誤，className為on的，就是li，不需要li.on，直接.on，就是選中了那個li
2020-03-12
CSS里面的tabs寫成tab了，還有JS里最后少了一個大括號，還有就是寫CSS的時候，那個CLASS類的點前面要有一個空格還有就是JS里的邏輯有一點小問題，下面是我給你修改后的，可以運行了
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實踐題?-?選項卡</title> ????<style?type="text/css"> ????????/*?CSS樣式制作?*/ ????????*{padding:0px;?margin:0px;?font:12px?normal?"microsoft?yahei";} ????????#tabs?{width:290px;?padding:5px;?height:150px;?margin:20px;} ????????#tabs?ul{list-style:none;?display:block;?height:30px;?line-height:30px;?border-bottom:2px?saddlebrown?solid;} ????????#tabs?ul?li{background:#fff;?cursor:pointer;?float:left;?list-style:none;?margin:0px?3px;?border:1px?solid?#aaa;?border-bottom:none;?display:inline-block;??text-align:center;} ????????#tabs?ul?li?.on{border-top:2px?saddlebrown?solid;?border-bottom:2px?solid?#fff;} ????????#tabs?div{height:120px;?line-height:25px;?border:1px?#336699?solid;?border-top:none;?padding:5px;} ????????#tabs??.hide{display:none;} ????</style> ????<script?type="text/javascript"> ????????//?JS實現(xiàn)選項卡切換 ????????window.onload?=?function()?{ ????????????var?tabs?=?document.getElementById("tabs"); ????????????var?Ul?=?document.getElementsByTagName("ul")[0]; ????????????var?Li?=?document.getElementsByTagName("li"); ????????????var?Div?=?document.getElementsByTagName("div"); ????????????for?(var?i?=?0;?i?<?Li.length;?i++)?{ ????????????????Li[i].index?=?i; ????????????????Li[i].onclick?=?function?()?{ ????????????????????for?(var?n?=?0;?n?<?Li.length;?n++)?{ ????????????????????????Div[n+1].className?=?"hide"; ????????????????????} ????????????????????Div[this.index+1].className?=?""; ????????????????} ????????????} ????????} ????</script> </head> <body> <!--?HTML頁面布局?--> <div?id="tabs"> ????<ul> ????????<li?class="on">房產(chǎn)</li> ????????<li>家居</li> ????????<li>二手房</li> ????</ul> ????<div?class=""> ????????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)生間煙道的設(shè)計<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>