無法實現效果，有大佬幫忙看一下嗎
<!DOCTYPE?html>
<html>
?<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????*{
????????margin:?0;
????????padding:?0;
????????font-size:?12px;
????????font-family:?"microsoft?yahei"
????}
????#tabs?{
????????float:?left;
????????width:?290px;
????????height:?150px;
????????padding:?5px;
????????margin:?20px;
????}
????#tabs?ul?{
????????display:?block;
????????height:?30px;
????????border-bottom:?2px?solid?saddlebrown;
????????line-height:?30px;
????????text-align:?center;
????????list-style-type:?none;
????}
????#tabs?ul?li?{
????????float:?left;
????????display:?inline-block;
????????width:?60px;
????????height:?28px;
????????margin:?0?3px;
????????line-height:?28px;
????????border:?1px?solid?#aaa;
????????border-bottom:?none;
????????cursor:?pointer;
????}
????#tabs?div?{
????????height:?110px;
????????padding:5px;
????????line-height:?25px;
????????border:?1px?solid?#336699;
????????border-top:?none;
????}
????.hide{
????????display:?none;
????}
????#tabs?ul?li.on{
????????border-top:?2px?solid?saddlebrown;
????????border-bottom:?2px?solid?#fff;
????}?
????</style>
????<script?type="text/javascript">
????//?JS實現選項卡切換
????window.onload?=?function(){
????????var?otab?=?document.getElementById("tabs");
????????var?oul?=?document.getElementsByTagName("ul")[0];
????????var?oli?=?oul.getElementsByTagName("li");
????????var?odiv?=?otab.getElementsByTagName("div");
????????for?(var?i?=?0;?i?<?oli.length;?i++){
????????????oli[i].index?=?i;
????????????oli.onclick?=?function(){
????????????????for(var?i?=?0;?i?<?oli.length;?i++)?{
????????????????????oli[i].className?=?"";
????????????????}
????????????????this.className?=?"on";
????????????????for(var?j?=?0;?j?<?odiv.length;?j++)?{
????????????????????odiv[j].className?=?"hide";
????????????????}
????????????????odiv[this.index].className?=?"";
????????????}
????????}
????}
????</script>
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????275萬購昌平鄰鐵三居?總價20萬買一居<br>
????????200萬內購五環三居?140萬安家東三環<br>
????</div>
????<div?class="hide">
????????40平出租屋大改造?美少女的混搭小窩<br>
????????經典清新簡歐愛家?90平老房煥發新生<br>
????</div>
????<div?class="hide">
????????通州豪華3居260萬?二環稀缺2居250w甩<br>
????????西3環通透2居290萬?130萬2居限量搶購<br>
????</div>
</div>
</body>
</html>
2019-08-15
忘加下標了?