<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
????ul,li,div{margin:0;
????padding:0;
????????}
????????a{
????????????text-decoration:none;
????????????color:black;
????????????border:1px?solid?;
????????????padding:5px;
????????}
????????ul{
????????????list-style:none;
????????????
????????????
????????}
????????li{margin:10px;
????????????display:inline;
????????????font-weight:bold;
????????????font-size:20px;
????????}
??????div{width:200px;
??????height:180px;
??????border:1px?solid?rgb(100,200,150);
??????padding-right:40px;
??????padding-left:10px;
??????margin:10px;
???????????????}?
??????#box1{
??????????
??????}
??????#box2{
?????????display:none;
??????}
??????#box3{
??????????
?????????display:none;
??????}
???????
????</style>
????<script?type="text/javascript">
?????????
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????function?a(b){
????????switch(b.innerHTML){
????????????case?"房產(chǎn)":var?c=document.getElementById("box2");
??????????????????var?d=document.getElementById("box3");
??????????????????var?e=document.getElementById("box1");
??????????????????c.style.display="none";
??????????????????d.style.display="none";
??????????????????e.style.display="block"
??????????????????break
????????????case?"家居":var?c=document.getElementById("box1");
??????????????????var?d=document.getElementById("box3");
??????????????????var?e=document.getElementById("box2");
??????????????????c.style.display="none";
??????????????????d.style.display="none";
??????????????????e.style.display="block"
??????????????????break
????????????case?"二手房":var?c=document.getElementById("box1");
??????????????????var?d=document.getElementById("box2");
??????????????????var?e=document.getElementById("box3");
??????????????????c.style.display="none";
??????????????????d.style.display="none";
??????????????????e.style.display="block"
??????????????????break
????????}
????}
????
????</script>
?
</head>
<body>
<!--?HTML頁(yè)面布局?-->
<ul?>
<li><a?href="javascript:a(this);">房產(chǎn)</a></li>
<li><a?href="javascript:a(this);">家居</a></li>
<li><a?href="javascript:a(this);">二手房</a></li>
????
</ul>
<div?id="box1">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居
?????200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)
?????北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平
?????京樓盤直降5000?中信府?公園樓王現(xiàn)房</div>
<div?id="box2">40平出租屋大改造?美少女的混搭小窩
??????經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生
??????新中式的酷色溫情?66平撞色活潑家居
??????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</div>
<div?id="box3">通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩
??????西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)
??????黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!
??????獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</div>
?
</body>
</html>
為什么我的無(wú)法實(shí)現(xiàn)選項(xiàng)卡切換，大神給看看
qq_安仁斗辣椒_0
2015-08-29 17:19:46
