首页手记按钮实现选项卡，请多指教

按钮实现选项卡，请多指教

标签：

Html/CSS JavaScript

根据这个慕课js编程练习做的一个选项卡切换，实现了粗略功能，很多细节没做到。希望朋友们能提出更正意见。

<!DOCTYPE HTML>
<!-- 用按钮实现选项卡，-->
<html content="text/html;charset=utf-8">
<head>
<title>网页选项卡的实现0</title>
<style type="text/css">
  #div0{
    border:1px blue solid;
    width:350px;
    border-top:2px #8B2500 solid;
  }
  li{
    list-style-type:none;
    //text-align:left;

  }
</style>
<script type="text/javascript">
function selected(obj)
{
    if(obj.value=="房产"){
        var lis = document.getElementsByTagName("li");
        lis[0].innerHTML = "275万购昌平邻铁三居 总价20万买一居";
        lis[1].innerHTML = "200万内购五环三居 140万安家东三环";
        lis[2].innerHTML = "北京首现零首付楼盘 53万购东5环50平";
        lis[3].innerHTML = "京楼盘直降5000 中信府 公园楼王现房";

    }else if(obj.value == "家居"){
        var lis = document.getElementsByTagName("li");
        lis[0].innerHTML = "40平出租屋大改造 美少女的混搭小窝";
        lis[1].innerHTML = "经典清新简欧爱家 90平老房焕发新生";
        lis[2].innerHTML = "新中式的酷色温情 66平撞色活泼家居";
        lis[3].innerHTML = "瓷砖就像选好老婆 卫生间烟道的设计";
    }else if(obj.value == "二手房"){
        var lis = document.getElementsByTagName("li");
        lis[0].innerHTML = "通州豪华3居260万 二环稀缺2居250w甩";
        lis[1].innerHTML = "西3环通透2居290万 130万2居限量抢购";
        lis[2].innerHTML = "黄城根小学学区仅260万 121平70万抛!";
        lis[3].innerHTML = "独家别墅280万 苏州桥2居优惠价248万";

    }
    var bt0 = document.getElementById("bt0");
    bt0.setAttribute("style", "border:1px #8B8878 solid;");
    var bt1 = document.getElementById("bt1");
    bt1.setAttribute("style", "border:1px #8B8878 solid;");
    var bt2 = document.getElementById("bt2");
    bt2.setAttribute("style", "border:1px #8B8878 solid;");
    obj.setAttribute("style", "border:1px #8B8878 solid;border-top:2px #8B2500 solid;border-bottom:4px white solid");

}
</script>
</head>
<body>
<input type="button" id ="bt0" value="房产" onClick='selected(this)'/>
<input type="button" id ="bt1" value="家居" onClick='selected(this)'/>
<input type="button" id ="bt2" value="二手房" onClick='selected(this)'/>
<div id="div0">
<ul>
    <li>275万购昌平邻铁三居 总价20万买一居</li>
    <li>200万内购五环三居 140万安家东三环</li>
  <li>北京首现零首付楼盘 53万购东5环50平</li>
  <li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
</body>
</html>

点击查看更多内容