這是我的實現(xiàn)方法，歡迎大家提出優(yōu)化意見~
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ul {
? ? ? ? list-style-type: none;
? ? }
? ? li {
? ? ? ? overflow: hidden;
? ? }
? ? .title {
? ? ? ? width: 60px;
? ? ? ? text-align: center;
? ? ? ? border: 1px solid blue;
? ? ? ? padding: 8px;
? ? ? ? cursor: pointer;
? ? ? ? float: left;
? ? ? ? border-bottom: none;
? ? }
? ? .content {
? ? ? ? width: 290px;
? ? ? ? padding: 20px;
? ? ? ? border: 1px solid black;
? ? }
? ? </style>
? ? <script type="text/javascript">
? ? // JS實現(xiàn)選項卡切換
? ? function change() {
? ? ? ? var title = document.getElementsByClassName("title");
? ? ? ? var content = document.getElementsByClassName("content");
? ? ? ? var text1 = "";
? ? ? ? var text2 = "";
? ? ? ? var text3 = "";
? ? ? ? for (var i = 0; i < title.length; i++) {
? ? ? ? ? ? title[i].onclick = function() {
? ? ? ? ? ? ? ? hiddenAll();
? ? ? ? ? ? ? ? var titleText = this.innerHTML;
? ? ? ? ? ? ? ? this.style.backgroundColor="lightblue";
? ? ? ? ? ? ? ? switch (titleText) {
? ? ? ? ? ? ? ? ? ? case "房產(chǎn)":
? ? ? ? ? ? ? ? ? ? ? ? content[0].hidden = null;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "家居":
? ? ? ? ? ? ? ? ? ? ? ? content[1].hidden = null;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "二手房":
? ? ? ? ? ? ? ? ? ? ? ? content[2].hidden = null;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function hiddenAll() {
? ? ? ? var content = document.getElementsByClassName("content");
? ? ? ? var title = document.getElementsByClassName("title");
? ? ? ? for (var i = 0; i < content.length; i++) {
? ? ? ? ? ? content[i].hidden = "hidden";
? ? ? ? ? ? title[i].style.backgroundColor="#fff";
? ? ? ? }
? ? }
? ? window.onload = function() {
? ? ? ?change();
? ? };
? ? </script>
</head>
<body>
? ? <!-- HTML頁面布局 -->
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <div class="title">房產(chǎn)</div>
? ? ? ? ? ? <div class="title">家居</div>
? ? ? ? ? ? <div class="title">二手房</div>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? 275萬購昌平鄰鐵三居 總價20萬買一居
? ? ? ? ? ? ? ? <br> 200萬內購五環(huán)三居 140萬安家東三環(huán)
? ? ? ? ? ? ? ? <br> 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平
? ? ? ? ? ? ? ? <br> 京樓盤直降5000 中信府 公園樓王現(xiàn)房
? ? ? ? ? ? ? ? <br>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="content" hidden="">
? ? ? ? ? ? ? ? 40平出租屋大改造 美少女的混搭小窩
? ? ? ? ? ? ? ? <br> 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生
? ? ? ? ? ? ? ? <br> 新中式的酷色溫情 66平撞色活潑家居
? ? ? ? ? ? ? ? <br> 瓷磚就像選好老婆 衛(wèi)生間煙道的設計
? ? ? ? ? ? ? ? <br>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="content" hidden="">
? ? ? ? ? ? ? ? 通州豪華3居260萬 二環(huán)稀缺2居250w甩
? ? ? ? ? ? ? ? <br> 西3環(huán)通透2居290萬 130萬2居限量搶購
? ? ? ? ? ? ? ? <br> 黃城根小學學區(qū)僅260萬 121平70萬拋!
? ? ? ? ? ? ? ? <br> 獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬
? ? ? ? ? ? ? ? <br>
? ? ? ? ? ? </div>
? ? ? ? </li>
? ? </ul>
</body>
</html>
2018-10-08
挺好的