<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</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實現選項卡切換
????????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'
????????????????????//獲取同級元素?設置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頁面布局?-->
<div?style="width:?312px;height:?200px">
????<ul?id="ul1">
????????<li?style="border-top:3px?solid?#996633;border-bottom:?3px?solid?#fff">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div?class="content"?style="display:?block;">
????????275萬購昌平鄰鐵三居 總價20萬買一居<br/>
????????200萬內購五環三居 140萬安家東三環<br/>
????????北京首現零首付樓盤 53萬購東5環50平<br/>
????????京樓盤直降5000 中信府 公園樓王現房
????</div>
????<div?class="content">
????????40平出租屋大改造 美少女的混搭小窩<br/>
????????經典清新簡歐愛家 90平老房煥發新生<br/>
????????新中式的酷色溫情 66平撞色活潑家居<br/>
????????瓷磚就像選好老婆 衛生間煙道的設計
????</div>
????<div?class="content">
????????通州豪華3居260萬?二環稀缺2居250w甩<br/>
????????西3環通透2居290萬?130萬2居限量搶購<br/>
????????黃城根小學學區僅260萬?121平70萬拋!<br/>
????????獨家別墅280萬?蘇州橋2居優惠價248萬<br/>
????</div>
</div>
</body>
</html>
2023-05-06
?window.onload?=?function?()?{ ??????let?text?=?[ ????????{ ??????????title:?'房產', ??????????content:?'275萬購昌平鄰鐵三居 總價20萬買一居<br/>200萬內購五環三居 140萬安家東三環<br/北京首現零首付樓盤 53萬購東5環50平<br/>京樓盤直降5000 中信府 公園樓王現房' ????????}, ????????{ ??????????title:?'家居', ??????????content:?'40平出租屋大改造 美少女的混搭小窩<br/>經典清新簡歐愛家 90平老房煥發新生<br/>新中式的酷色溫情 66平撞色活潑家居<br/瓷磚就像選好老婆 衛生間煙道的設計' ????????}, ????????{ ??????????title:?'二手房', ??????????content:?'通州豪華3居260萬?二環稀缺2居250w甩<br/>西3環通透2居290萬?130萬2居限量搶購<br/>黃城根小學學區僅260萬?121平70萬拋!<br/>獨家別墅280萬?蘇州橋2居優惠價248萬<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' ??????}) ????}