<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>實踐題?-?選項卡</title><style?type="text/css">/*?CSS樣式制作?*/*{margin:?0px;}#content{width:?500px;height:?300px;border:?1px?solid?blue;margin:?0px?50px?0px;overflow:?hidden;}ul?{list-style:?none;margin:?50px?0px?0px?50px;padding:?0px;}#navi?li?{padding:?0px;color:silver;display:?inline-block;width:?100px;height:?40px;border:?1px?solid?gray;border-bottom:?1px?solid?#FF7F00;margin:?0?0?0px?10px;text-align:?center;font-weight:?bold;line-height:?40px;/*?overflow:?hidden;?*//*box-sizing:?border-box;*//*?box-sizing:border-box;-moz-box-sizing:border-box;?/*?Firefox?*-webkit-box-sizing:border-box;?/*?Safari?*?*/}#navi?li:hover{cursor:?pointer;/*該cursor樣式控制鼠標的顯示為手指*/}</style><script?type="text/javascript">//?JS實現選項卡切換window.onload?=?function(){//初始化setMain();var?lis?=?document.getElementsByTagName("li");for(var?i?=?0;?i<lis.length;?i++){lis[i].onmouseover?=?function(){//移進前清理所有樣式clearStyleOnMouseOver();/*?style['z-index']?=?1;?數值越大越靠近用戶,負數表示在后面*/var?style?=?this.style;style['border-top']?=?"2px?solid?#FF7F00";style['margin-top']?=?"-1px";var?div?=?document.getElementById("content");div.style['border-top']?=?"2px?solid?#FF7F00";div.style['margin-top']?=?"-2px";//設置2px的#FFFFFF白色是為了隱藏該區域顏色,并且通過div的overflow屬性清除溢出的橘紅色style['border-bottom']?=?"2px?solid?#FFFFFF";//在追加之前清理所有子節點clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[1]?=?document.createElement("li");lisindiv[2]?=?document.createElement("li");lisindiv[3]?=?document.createElement("li");if(this.innerHTML?==?"房產"){lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"家居"){lisindiv[0].innerHTML?=?"40平出租屋大改造?美少女的混搭小窩";lisindiv[1].innerHTML?=?"經典清新簡歐愛家?90平老房煥發新生";lisindiv[2].innerHTML?=?"新中式的酷色溫情?66平撞色活潑家居";lisindiv[3].innerHTML?=?"瓷磚就像選好老婆?衛生間煙道的設計";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"二手房"){lisindiv[0].innerHTML?=?"通州豪華3居260萬?二環稀缺2居250w甩";lisindiv[1].innerHTML?=?"西3環通透2居290萬?130萬2居限量搶購";lisindiv[2].innerHTML?=?"?黃城根小學學區僅260萬?121平70萬拋!";lisindiv[3].innerHTML?=?"獨家別墅280萬?蘇州橋2居優惠價248萬";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else{lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}ul.style['list-style']?=?"none";div.appendChild(ul);};/*?lis[i].onmouseout?=?function(){var?style?=?this.style;style['border']?=?"1px?solid?gray";style['border-bottom']?=?"none";style['margin-top']?=?"0px";var?div?=?document.getElementById("content");div.style['border-top']?=?"1px?solid?blue";div.style['margin-top']?=?"0px";?*///先移除所有子節點/*?clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);?*///};}};//在移進之前,清除上一個鼠標移進動作殘留的效果function?clearStyleOnMouseOver(){var?ul1?=?document.getElementById("navi");var?lisOfUl1?=?getAllElement(ul1);var?div?=?document.getElementById("content");div.style['border-top']?=?"1px?solid?blue";div.style['margin-top']?=?"0px";for(var?i?=?0;?i<lisOfUl1.length;?i++){var?style?=?lisOfUl1[i].style;style['border-top']?=?"1px?solid?gray";style['margin-top']?=?"0px";//設置2px的#FFFFFF白色是為了隱藏該區域顏色,并且通過div的overflow屬性清除溢出的橘紅色style['border-bottom']?=?"1px?solid?gray";}}//當頁面剛加載時就要把主頁內容顯示function?setMain(){var?div?=?document.getElementById("content");clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);}//清除所有子節點function?clearAllChilds(element){var?childs?=?element.childNodes;for(var?n?=?0;?n<childs.length;?n++){element.removeChild(childs[0]);}}//得到所有節點為元素類型的子節點function?getAllElement(element){var?childs?=?element.childNodes;var?realChilds?=?[];var?count?=?0;for(var?i?=?0;?i<childs.length;?i++){if(childs[i].nodeType?==?1){realChilds[count++]?=?childs[i];}}return?realChilds;}</script></head><body><!--?HTML頁面布局?--><ul?id="navi"><li>房產</li><li>家居</li><li>二手房</li></ul><div?id="content"></div></body></html>
2018-11-19
樓上是最好理解的一個答案了
2018-09-14
<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>實踐題?-?選項卡</title><style?type="text/css">/*?CSS樣式制作?*/*{margin:?0px;}#content{width:?500px;height:?300px;border:?1px?solid?blue;margin:?0px?50px?0px;overflow:?hidden;}ul?{list-style:?none;margin:?50px?0px?0px?50px;padding:?0px;}#navi?li?{padding:?0px;color:silver;display:?inline-block;width:?100px;height:?40px;border:?1px?solid?gray;border-bottom:?1px?solid?#FF7F00;margin:?0?0?0px?10px;text-align:?center;font-weight:?bold;line-height:?40px;/*?overflow:?hidden;?*//*box-sizing:?border-box;*//*?box-sizing:border-box;-moz-box-sizing:border-box;?/*?Firefox?*-webkit-box-sizing:border-box;?/*?Safari?*?*/}#navi?li:hover{cursor:?pointer;/*該cursor樣式控制鼠標的顯示為手指*/}</style><script?type="text/javascript">window.onload?=?function(){/*初始化*/setMain();var?lis?=?document.getElementsByTagName("li");for(var?i?=?0;?i<lis.length;?i++){lis[i].onmouseover?=?function(){/*移進前清理所有樣式*/clearStyleOnMouseOver();/*?style['z-index']?=?1;?數值越大越靠近用戶,負數表示在后面*/var?style?=?this.style;style['border-top']?=?"2px?solid?#FF7F00";style['margin-top']?=?"-1px";var?div?=?document.getElementById("content");div.style['border-top']?=?"2px?solid?#FF7F00";div.style['margin-top']?=?"-2px";/*設置2px的#FFFFFF白色是為了隱藏該區域顏色,并且通過div的overflow屬性清除溢出的橘紅色*/style['border-bottom']?=?"2px?solid?#FFFFFF";/*在追加之前清理所有子節點*/clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[1]?=?document.createElement("li");lisindiv[2]?=?document.createElement("li");lisindiv[3]?=?document.createElement("li");if(this.innerHTML?==?"房產"){lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"家居"){lisindiv[0].innerHTML?=?"40平出租屋大改造?美少女的混搭小窩";lisindiv[1].innerHTML?=?"經典清新簡歐愛家?90平老房煥發新生";lisindiv[2].innerHTML?=?"新中式的酷色溫情?66平撞色活潑家居";lisindiv[3].innerHTML?=?"瓷磚就像選好老婆?衛生間煙道的設計";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"二手房"){lisindiv[0].innerHTML?=?"通州豪華3居260萬?二環稀缺2居250w甩";lisindiv[1].innerHTML?=?"西3環通透2居290萬?130萬2居限量搶購";lisindiv[2].innerHTML?=?"?黃城根小學學區僅260萬?121平70萬拋!";lisindiv[3].innerHTML?=?"獨家別墅280萬?蘇州橋2居優惠價248萬";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else{lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}ul.style['list-style']?=?"none";div.appendChild(ul);};}};/*在移進之前,清除上一個鼠標移進動作殘留的效果*/function?clearStyleOnMouseOver(){var?ul1?=?document.getElementById("navi");var?lisOfUl1?=?getAllElement(ul1);var?div?=?document.getElementById("content");div.style['border-top']?=?"1px?solid?blue";div.style['margin-top']?=?"0px";for(var?i?=?0;?i<lisOfUl1.length;?i++){var?style?=?lisOfUl1[i].style;style['border-top']?=?"1px?solid?gray";style['margin-top']?=?"0px";/*設置2px的#FFFFFF白色是為了隱藏該區域顏色,并且通過div的overflow屬性清除溢出的橘紅色*/style['border-bottom']?=?"1px?solid?gray";}}/*當頁面剛加載時就要把主頁內容顯示*/function?setMain(){var?div?=?document.getElementById("content");clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[0].innerHTML?=?"275萬購昌平鄰鐵三居?總價20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內購五環三居?140萬安家東三環";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現零首付樓盤?53萬購東5環50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);}/*清除所有子節點*/function?clearAllChilds(element){var?childs?=?element.childNodes;for(var?n?=?0;?n<childs.length;?n++){element.removeChild(childs[0]);}}/*清除所有節點下所有#text類型的節點*/function?getAllElement(element){var?childs?=?element.childNodes;var?realChilds?=?[];var?count?=?0;for(var?i?=?0;?i<childs.length;?i++){if(childs[i].nodeType?==?1){realChilds[count++]?=?childs[i];}}return?realChilds;}</script></head><body><ul?id="navi"><li>房產</li><li>家居</li><li>二手房</li></ul><div?id="content"></div></body></html>