<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
????????*?{
????????????padding:?0;
????????????margin:?0;
????????}
????????ul?{
????????????list-style:?none;
????????????display:?block;
????????????height:?31px;
????????????border-bottom:?3px?solid?#996633;
????????}
????????/*?CSS樣式制作?*/
????????li?{
????????????list-style:?none;
????????????float:?left;
????????????width:?55px;
????????????height:?28px;
????????????margin-right:?-1px;
????????????text-align:?center;
????????????border:?1px?solid?black;
????????????border-bottom:?none;
????????}
????????.content?{
????????????position:?absolute;
????????????top:?33px;
????????????width:?300px;
????????????height:?150px;
????????????background:?white;
????????????line-height:?2em;
????????????padding:?5px;
????????????display:?none;
????????????border:?1px?solid?black;
????????????border-top:?none;
????????}
????</style>
????<script?type="text/javascript">
????????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????????window.onload?=?function?()?{
????????????var?ul1?=?document.getElementById('ul1');
????????????var?lis?=?ul1.getElementsByTagName('li');
????????????var?divs?=?document.getElementsByClassName('content')
????????????for?(let?i?=?0;?i?<?lis.length;?i++)?{
????????????????lis[i].onclick?=?function?()?{
????????????????????divs[i].style.display?=?'block'
????????????????????lis[i].style.borderTop?=?'3px?solid?#996633'
????????????????????lis[i].style.borderBottom?=?'3px?solid?#fff'
????????????????????//獲取同級(jí)元素?設(shè)置display
????????????????????for?(let?j?=?0;?j?<?lis.length;?j++)?{
????????????????????????if?(i?!=?j)?{
????????????????????????????divs[j].style.display?=?'none'
????????????????????????????lis[j].style.borderTop?=?'1px?solid?black'
????????????????????????????lis[j].style.borderBottom?=?'none'
????????????????????????}
????????????????????}
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<!--?HTML頁(yè)面布局?-->
<div?style="width:?312px;height:?200px">
????<ul?id="ul1">
????????<li?style="border-top:3px?solid?#996633;border-bottom:?3px?solid?#fff">房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div?class="content"?style="display:?block;">
????????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="content">
????????40平出租屋大改造 美少女的混搭小窩<br/>
????????經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br/>
????????新中式的酷色溫情 66平撞色活潑家居<br/>
????????瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
????</div>
????<div?class="content">
????????通州豪華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)<br/>
????</div>
</div>
</body>
</html>
2023-05-06
?window.onload?=?function?()?{ ??????let?text?=?[ ????????{ ??????????title:?'房產(chǎn)', ??????????content:?'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)房' ????????}, ????????{ ??????????title:?'家居', ??????????content:?'40平出租屋大改造 美少女的混搭小窩<br/>經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br/>新中式的酷色溫情 66平撞色活潑家居<br/瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)' ????????}, ????????{ ??????????title:?'二手房', ??????????content:?'通州豪華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)<br/>' ????????} ??????] ??????var?ul1?=?document.getElementById('ul1'); ??????var?divs?=?document.getElementById('content') ??????text.forEach((li,?i)?=>?{ ????????ul1.innerHTML?+=?`<li?data-content='${li.content}'?class='${i?==?0???"active"?:?""}'>${li.title}</li>` ??????}) ??????divs.innerHTML?=?text[0].content ??????ul1.addEventListener('click',?function?(e)?{ ????????[].slice.call(this.children).forEach(li?=>?{ ??????????li.className?=?'' ????????}) ????????divs.innerHTML?=?e.target.dataset.content ????????e.target.className?=?'active' ??????}) ????}