                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

看看我的代码,花了一天时间啊，好难弄

<!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>

慕娘6527991

2018-09-14

源自：JavaScript进阶篇 10-1

关注问题我要回答

923

操作

收起

2 回答

weibo_慕丝3052053
2018-11-19

楼上是最好理解的一个答案了

0 回复有任何疑惑可以回复我~

收起回答

慕娘6527991 提问者
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>