                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

先保存代碼，在修改

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/?
????????*{
????????????margin:0px;
????????????padding:0px;
????????}
?????li{
????????list-style:none;
?????}
??????#ul1{
??????????list-style:none;
??????????display:block;
??????????height:30px;???
??????}
?????#ul1?li{
?????????display:inline-block;
?????????height:30px;
?????????width:50px;
?????????text-align:center;
?????????line-height:30px;
?????????margin:5px?20px;
?????????border:1px?solid?#000;
?????}
?????#div1,#div2,#div3{
??????margin:5px?20px?;
??????width:400px;
??????background:#f00;
??????border:2px?solid?#000;
?????}
?????#div2,#div3{
?????????display:none;
?????}??
????</style>
????<script?type="text/javascript">
?????????
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????var?div1?=?document.getElementById("div1");
????var?div2?=?document.getElementById("div2");
????var?div3?=?document.getElementById("div3");
????div2.display="none";
????</script>
?
</head>
<body>
<!--?HTML頁(yè)面布局?-->
<div>
????<ul?id?=?"ul1">
????????<li>房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div?id="div1">
????????<ul>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????</ul>
????</div>
????<div?id="div2">
????????<ul>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????</ul>
????</div>
????<div?id="div3">
????????<ul>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????<li><a?href="">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????</ul>
????</div>
</div>

?
</body>
</html>