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

寫了大半天，中間碰到幾個(gè)問(wèn)題，好在最后搞出來(lái)了，曬一曬

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>

? ? ?/* CSS樣式制作 */ ?

? ? ? body{font-size:100%;font-family:"Microsoft Yahei";}

? ? ? body>div{margin:10px;padding:16px;height:190px;width:340px;}

? ? ? .top{margin:0;padding:0;height:20%;}

? ? ? .content{margin:0;padding:5px;height:65%;border:1px solid #069;border-top:2px solid #630; }?

? ? ? .top>div{height:36px; line-height:38px; width:70px;margin:0 5px;text-align:center;border:1px #CCC solid;border-bottom:none; float:left;}

? ? ? .content>div.off{display:none}

?.top>div.on{border-top:2px solid #630;border-bottom:2px solid #fff;} ? ? ? ? ??

</style>

? ? ? ? ?

? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換

? ? window.onload=function(){

? ? ? ? var div=document.getElementsByClassName('top')[0];

var menu=div.getElementsByTagName('div');

var content=document.getElementsByClassName('content')[0];

var txt=content.getElementsByTagName('div');

function click(x)

{

menu[x].onclick=function(){

for(var i=0;i<txt.length;i++)

{

txt[i].className='off';

? ?menu[i].className='';

}

txt[x].className='';

menu[x].className='on'}

}

? ? for(var i=0;i<menu.length;i++)

{ click(i); ?} ?

}

? ??

</script> ? ?

</head>

<body>

<div>

? ? <div class="top">

? ? ? ? <div class="on">房產(chǎn)</div>

? ? ? ? <div>家居</div>

? ? ? ? <div>二手房</div>?

? ? </div>

? ? <div class="content">

? ? ? ? <div >275萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買一居<br/>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)<br/>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平<br/>京樓盤直降5000 中信府公園樓王現(xiàn)房</div>

? ? ? ? <div class="off">40平出租屋大改造美少女的混搭小窩<br/>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生<br/>新中式的酷色溫情 66平撞色活潑家居<br/>瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)</div>

? ? ? ? <div class="off">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩<br/>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br/>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!<br/>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</div>

? ? </div>

</div>

</body>

</html>