終于完成了，請指教！
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? .tag {
? ? ? ? border:1px solid gray;
? ? ? ? border-bottom:2px solid brown;
? ? ? ? height:30px;
? ? ? ? width:60px;
? ? ? ? float:left;
? ? ? ? /*display:inline-block;*/
? ? ? ? margin:0px 3px;
? ? ? ? text-align:center;
? ? ? ? line-height:30px;
? ? ? ? background-Color:white;
? ? }
? ??
? ? #content {
? ? ? ? position:absolute;
? ? ? ? top:39px;
? ? ? ? border:1px solid blue;
? ? ? ? border-top:2px solid brown;
? ? ? ? width:300px;
? ? ? ? height:200px;
? ? ? ? z-index:-1;
? ? }
? ??
? ? #content>div {
? ? ? ? margin-left:5px;
? ? }
? ??
? ? </style>
? ? <script type="text/javascript">
? ? var ctt1 = document.createElement("div");
? ? ctt1.setAttribute("id", "房產");
? ? ctt1.style.display = "none";
? ? var ctt11 = document.createElement("p");
? ? ctt11.innerHTML = "275萬購昌平鄰鐵三居 總價20萬買一居";
? ? ctt1.appendChild(ctt11);
? ??
? ? var ctt12 = document.createElement("p");
? ? ctt12.innerHTML = "200萬內購五環三居 140萬安家東三環";
? ? ctt1.appendChild(ctt12);
? ??
? ? var ctt13 = document.createElement("p");
? ? ctt13.innerHTML = "北京首現零首付樓盤 53萬購東5環50平";
? ? ctt1.appendChild(ctt13);
? ??
? ? var ctt14 = document.createElement("p");
? ? ctt14.innerHTML = "京樓盤直降5000 中信府 公園樓王現房";
? ? ctt1.appendChild(ctt14);
? ??
? ??
? ? var ctt2 = document.createElement("div");
? ? ctt2.setAttribute("id", "家居");
? ? ctt2.style.display = "none";
? ? var ctt21 = document.createElement("p");
? ? ctt21.innerHTML = "40平出租屋大改造 美少女的混搭小窩";
? ? ctt2.appendChild(ctt21);
? ??
? ? var ctt22 = document.createElement("p");
? ? ctt22.innerHTML = "經典清新簡歐愛家 90平老房煥發新生";
? ? ctt2.appendChild(ctt22);
? ??
? ? var ctt23 = document.createElement("p");
? ? ctt23.innerHTML = "新中式的酷色溫情 66平撞色活潑家居";
? ? ctt2.appendChild(ctt23);
? ??
? ? var ctt24 = document.createElement("p");
? ? ctt24.innerHTML = "瓷磚就像選好老婆 衛生間煙道的設計";
? ? ctt2.appendChild(ctt24);
? ??
? ??
? ? var ctt3 = document.createElement("div");
? ? ctt3.setAttribute("id", "二手房");
? ? ctt3.style.display = "none";
? ? var ctt31 = document.createElement("p");
? ? ctt31.innerHTML = "通州豪華3居260萬 二環稀缺2居250w甩";
? ? ctt3.appendChild(ctt31);
? ??
? ? var ctt32 = document.createElement("p");
? ? ctt32.innerHTML = "西3環通透2居290萬 130萬2居限量搶購";
? ? ctt3.appendChild(ctt32);
? ??
? ? var ctt33 = document.createElement("p");
? ? ctt33.innerHTML = "黃城根小學學區僅260萬 121平70萬拋!";
? ? ctt3.appendChild(ctt33);
? ??
? ? var ctt34 = document.createElement("p");
? ? ctt34.innerHTML = "獨家別墅280萬 蘇州橋2居優惠價248萬";
? ? ctt3.appendChild(ctt34);
? ??
? ? var last;
? ? function init() {
? ? ? ? var ctt = document.getElementById("content");
? ? ? ? ctt.appendChild(ctt1);
? ? ? ? ctt.appendChild(ctt2);
? ? ? ? ctt.appendChild(ctt3);
? ? ? ??
? ? ? ? var dft = document.getElementById("dft");
? ? ? ? select(dft);
? ? ? ? last = dft;
? ? }
? ? // JS實現選項卡切換
? ? function tagclick(t) {
? ? ? ? if (last != null) {
? ? ? ? ? ? unselect(last);
? ? ? ? }
? ? ? ??
? ? ? ? select(t);
? ? ? ? last=t;
? ? }
? ??
? ? function select(t) {
? ? ? ? if (t != null) {
? ? ? ? ? ? t.style.borderTop="2px solid brown";
? ? ? ? ? ? t.style.borderBottom="2px solid white";
? ? ? ? ? ? document.getElementById(t.innerHTML).style.display="block";
? ? ? ? }
? ? }
? ??
? ? function unselect(t) {
? ? ? ? if (t != null) {
? ? ? ? ? ? t.style.borderTop="1px solid gray";
? ? ? ? ? ? t.style.borderBottom="2px solid brown";
? ? ? ? ? ? document.getElementById(t.innerHTML).style.display="none";
? ? ? ? }
? ? }
? ??
? ? </script>
?
</head>
<body onload="init()">
<!-- HTML頁面布局 -->
? ? <div class="tag" id="dft" style="cursor:pointer" onclick="tagclick(this)">房產</div>
? ? <div class="tag" style="cursor:pointer" onclick="tagclick(this)">家居</div>
? ? <div class="tag" style="cursor:pointer" onclick="tagclick(this)">二手房</div>
? ??
? ? <div id="content"></div>
</body>
</html>
2018-08-20
咱倆思路好像差不多, 也曬一下, 請指教
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ?* { margin:0; padding:0; list-style:none; }
? ? ?#hou { margin:30px auto; width:320px; height:160px;/* border:1px solid black;*/ }
? ? ?#hou>ul { list-style:none; position:relative; width:100%; height:32px; border-bottom:2px solid red; }
? ? ?#hou>ul li { cursor:pointer; float:left; margin-left:5px; width:60px; height:30px; font-size:14px; text-align:center; line-height:30px; border:1px solid black; border-bottom:none; }
? ? ?#hou .on { border-top:2px solid red; border-bottom:4px solid white; }
? ? ?#message { position:absolute; top:62px; left:25px; padding-left:10px; width:310px; height:130px; font-size:14px; line-height:25px; border:1px solid blue; border-top:none; }
? ? </style>
? ? <script>
? ? ? ? window.onload = function() {
? ? ? ? ? ? var cho = document.getElementById('hou').getElementsByTagName('li');
? ? ? ? ? ? //alert(cho.length);
? ? ? ? ? ? for(var i=0; i<cho.length; i++) {
? ? ? ? ? ? ? ? textChange(1);
? ? ? ? ? ? ? ? cho[i].onmouseover = function() {?
? ? ? ? ? ? ? ? ? ? var index = this.getAttribute('index');
? ? ? ? ? ? ? ? ? ? cssChange(index);
? ? ? ? ? ? ? ? ? ? textChange(index);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //更改樣式函數
? ? ? ? ? ? function cssChange(obj) {
? ? ? ? ? ? ? ? //清除 css 樣式
? ? ? ? ? ? ? ? for (var i=0; i<cho.length; i++) {
? ? ? ? ? ? ? ? ? ? if (cho[i].className == 'on') {
? ? ? ? ? ? ? ? ? ? ? ? cho[i].className = '';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //代碼優化
? ? ? ? ? ? ? ? if (cho[obj-1].className == 'on') {
? ? ? ? ? ? ? ? ? ? return ;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? cho[obj-1].className = 'on';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //更改盒子內容函數
? ? ? ? ? ? function textChange(index) {
? ? ? ? ? ? ? ? var message = document.getElementById('message');
? ? ? ? ? ? ? ? var p1 = ['275萬購昌平鄰鐵三居 總價20萬買一居<br>','40平出租屋大改造 美少女的混搭小窩<br>','通州豪華3居260萬 二環稀缺2居250w甩<br>'];
? ? ? ? ? ? ? ? var p2 = ['200萬內購五環三居 140萬安家東三環<br>','經典清新簡歐愛家 90平老房煥發新生<br>','西3環通透2居290萬 130萬2居限量搶購<br>'];
? ? ? ? ? ? ? ? var p3 = ['北京首現零首付樓盤 53萬購東5環50平 <br>','新中式的酷色溫情 66平撞色活潑家居<br>','黃城根小學學區僅260萬 121平70萬拋!<br>'];
? ? ? ? ? ? ? ? var p4 = ['京樓盤直降5000 中信府 公園樓王現房<br>','瓷磚就像選好老婆 衛生間煙道的設計<br>','獨家別墅280萬 蘇州橋2居優惠價248萬<br>'];
? ? ? ? ? ? ? ? var num = index -1;
? ? ? ? ? ? ? ? message.innerHTML = p1[num] + p2[num] + p3[num] + p4[num];
? ? ? ? ? ? }
? ? ? ? }?
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
? ? <div id="hou">
? ? ? ? <ul>
? ? ? ? ? ? <li index=1 class="on">房產</li>
? ? ? ? ? ? <li index=2 >家居</li>
? ? ? ? ? ? <li index=3 >二手房</li>
? ? ? ? </ul>
? ? </div>
? ? <div id="message">
? ? </div>
?
</body>
</html>