<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>實(shí)踐題?-?選項(xiàng)卡</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樣式控制鼠標(biāo)的顯示為手指*/}</style><script?type="text/javascript">//?JS實(shí)現(xiàn)選項(xiàng)卡切換window.onload?=?function(){//初始化setMain();var?lis?=?document.getElementsByTagName("li");for(var?i?=?0;?i<lis.length;?i++){lis[i].onmouseover?=?function(){//移進(jìn)前清理所有樣式clearStyleOnMouseOver();/*?style['z-index']?=?1;?數(shù)值越大越靠近用戶,負(fù)數(shù)表示在后面*/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";//設(shè)置2px的#FFFFFF白色是為了隱藏該區(qū)域顏色,并且通過div的overflow屬性清除溢出的橘紅色style['border-bottom']?=?"2px?solid?#FFFFFF";//在追加之前清理所有子節(jié)點(diǎn)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?==?"房產(chǎn)"){lisindiv[0].innerHTML?=?"275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"家居"){lisindiv[0].innerHTML?=?"40平出租屋大改造?美少女的混搭小窩";lisindiv[1].innerHTML?=?"經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生";lisindiv[2].innerHTML?=?"新中式的酷色溫情?66平撞色活潑家居";lisindiv[3].innerHTML?=?"瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"二手房"){lisindiv[0].innerHTML?=?"通州豪華3居260萬?二環(huán)稀缺2居250w甩";lisindiv[1].innerHTML?=?"西3環(huán)通透2居290萬?130萬2居限量搶購(gòu)";lisindiv[2].innerHTML?=?"?黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!";lisindiv[3].innerHTML?=?"獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else{lisindiv[0].innerHTML?=?"275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";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";?*///先移除所有子節(jié)點(diǎn)/*?clearAllChilds(div);var?ul?=?document.createElement("ul");var?lisindiv?=?[];lisindiv[0]?=?document.createElement("li");lisindiv[0].innerHTML?=?"275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);?*///};}};//在移進(jìn)之前,清除上一個(gè)鼠標(biāo)移進(jìn)動(dòng)作殘留的效果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";//設(shè)置2px的#FFFFFF白色是為了隱藏該區(qū)域顏色,并且通過div的overflow屬性清除溢出的橘紅色style['border-bottom']?=?"1px?solid?gray";}}//當(dāng)頁(yè)面剛加載時(shí)就要把主頁(yè)內(nèi)容顯示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萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);}//清除所有子節(jié)點(diǎn)function?clearAllChilds(element){var?childs?=?element.childNodes;for(var?n?=?0;?n<childs.length;?n++){element.removeChild(childs[0]);}}//得到所有節(jié)點(diǎn)為元素類型的子節(jié)點(diǎn)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頁(yè)面布局?--><ul?id="navi"><li>房產(chǎn)</li><li>家居</li><li>二手房</li></ul><div?id="content"></div></body></html>
2018-11-19
樓上是最好理解的一個(gè)答案了
2018-09-14
<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>實(shí)踐題?-?選項(xiàng)卡</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樣式控制鼠標(biāo)的顯示為手指*/}</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(){/*移進(jìn)前清理所有樣式*/clearStyleOnMouseOver();/*?style['z-index']?=?1;?數(shù)值越大越靠近用戶,負(fù)數(shù)表示在后面*/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";/*設(shè)置2px的#FFFFFF白色是為了隱藏該區(qū)域顏色,并且通過div的overflow屬性清除溢出的橘紅色*/style['border-bottom']?=?"2px?solid?#FFFFFF";/*在追加之前清理所有子節(jié)點(diǎn)*/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?==?"房產(chǎn)"){lisindiv[0].innerHTML?=?"275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"家居"){lisindiv[0].innerHTML?=?"40平出租屋大改造?美少女的混搭小窩";lisindiv[1].innerHTML?=?"經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生";lisindiv[2].innerHTML?=?"新中式的酷色溫情?66平撞色活潑家居";lisindiv[3].innerHTML?=?"瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else?if(this.innerHTML?==?"二手房"){lisindiv[0].innerHTML?=?"通州豪華3居260萬?二環(huán)稀缺2居250w甩";lisindiv[1].innerHTML?=?"西3環(huán)通透2居290萬?130萬2居限量搶購(gòu)";lisindiv[2].innerHTML?=?"?黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!";lisindiv[3].innerHTML?=?"獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}else{lisindiv[0].innerHTML?=?"275萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}}ul.style['list-style']?=?"none";div.appendChild(ul);};}};/*在移進(jìn)之前,清除上一個(gè)鼠標(biāo)移進(jìn)動(dòng)作殘留的效果*/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";/*設(shè)置2px的#FFFFFF白色是為了隱藏該區(qū)域顏色,并且通過div的overflow屬性清除溢出的橘紅色*/style['border-bottom']?=?"1px?solid?gray";}}/*當(dāng)頁(yè)面剛加載時(shí)就要把主頁(yè)內(nèi)容顯示*/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萬購(gòu)昌平鄰鐵三居?總價(jià)20萬買一居";lisindiv[1]?=?document.createElement("li");lisindiv[1].innerHTML?=?"200萬內(nèi)購(gòu)五環(huán)三居?140萬安家東三環(huán)";lisindiv[2]?=?document.createElement("li");lisindiv[2].innerHTML?=?"北京首現(xiàn)零首付樓盤?53萬購(gòu)東5環(huán)50平";lisindiv[3]?=?document.createElement("li");lisindiv[3].innerHTML?=?"京樓盤直降5000?中信府?公園樓王現(xiàn)房";for(var?n?=?0;?n<lisindiv.length;?n++){ul.appendChild(lisindiv[n]);}ul.style['list-style']?=?"none";div.appendChild(ul);}/*清除所有子節(jié)點(diǎn)*/function?clearAllChilds(element){var?childs?=?element.childNodes;for(var?n?=?0;?n<childs.length;?n++){element.removeChild(childs[0]);}}/*清除所有節(jié)點(diǎn)下所有#text類型的節(jié)點(diǎn)*/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>房產(chǎn)</li><li>家居</li><li>二手房</li></ul><div?id="content"></div></body></html>