無法實(shí)現(xiàn)效果，有大佬幫忙看一下嗎
<!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>實(shí)踐題?-?選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
????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頁(yè)面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居<br>
????????200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)<br>
????</div>
????<div?class="hide">
????????40平出租屋大改造?美少女的混搭小窩<br>
????????經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生<br>
????</div>
????<div?class="hide">
????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br>
????????西3環(huán)通透2居290萬?130萬2居限量搶購(gòu)<br>
????</div>
</div>
</body>
</html>
2019-08-15
忘加下標(biāo)了?