<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,ul,li,a{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } #wrap{ width: 800px; margin: 100px auto; position: relative; } #nav { width: 100%; height: 28px; border-bottom: 2px solid #F76300; } #nav li{ width: 60px; height: 28px; font: 16px/28px "微软雅黑"; float: left; text-align: center; cursor: pointer; } #nav .active{ background:#F76300 ; color: #FFFFFF; } #list1,#list2{ width: 100%; padding-top: 20px; } #list1 li{ padding-bottom: 20px; } #list1 li a{ font-size:16px; line-height: 20px; } #list2{ display: none; } #list2 li{ margin-bottom: 30px; } #show{ width: 400px; height: 200px; border: 2px solid #F76300; position: absolute; display: none; background: #FFFFFF; } #arrow{ width: 10px; height: 10px; position: absolute; left:-7px; top:40px; border-top: 2px solid #F76300; border-left: 2px solid #F76300; -webkit-transform: rotate(-45deg); background: #FFFFFF; } #details li { border-bottom: 1px solid #9C9C9C; margin-bottom: 15px; font-size: 14px; text-indent: 20px; } #details li span{ padding-right: 30px; } </style> </head> <body> <div id="wrap"> <ul id="nav"> <li class="active">前端</li> <li>后端</li> </ul> <ul id="list1"></ul> <ul id="list2"></ul> <div id="show"> <h3></h3> <ul id="details"> <li> 职位: <span></span> 招聘人数: <span></span> </li> <li> 工作地点: <span></span> 工作经历: <span></span> </li> <li> 学历: <span></span> 薪资: <span></span> </li> </ul> <div id="arrow"></div> </div> </div> <script type="text/javascript" src="js/data.js"></script> <script> window.onload = function(){ var wrap = document.getElementById("wrap"); var nav = document.getElementById("nav"); var nav_li = nav.children; var list1 = document.getElementById("list1"); var aLi1 = list1.children; var aS1 = list1.getElementsByTagName("a"); var show = document.getElementById("show"); var arrow = document.getElementById("arrow"); var details = document.getElementById("details"); var aSpan = details.getElementsByTagName("span"); var oh3 = show.children[0]; nav_li[0].innerHTML = data[0].name; nav_li[1].innerHTML = data[1].name; var dataLen1 = data[0].list.length; var dataLen2 = data[1].list.length; for (var i=0;i<dataLen1;i++) { var cLi1 = document.createElement("li"); var cA1 = document.createElement("a"); cA1.href = "javacript:;"; cA1.innerHTML = data[0].list[i].title; cLi1.appendChild(cA1); list1.appendChild(cLi1); } for (var i=0;i<dataLen2;i++) { var cLi2 = document.createElement("li"); var cA2 = document.createElement("a"); cA2.href = "javacript:;"; cA2.innerHTML = data[1].list[i].title; cLi2.appendChild(cA2); list2.appendChild(cLi2); } nav_li[1].addEventListener("click",function(){ nav_li[0].className = ""; nav_li[1].className = "active"; list1.style.display = "none"; list2.style.display = "block"; }); nav_li[0].addEventListener("click",function(){ nav_li[1].className = ""; nav_li[0].className = "active"; list1.className = "active"; list1.style.display = "block"; list2.style.display = "none"; }); for (var i=0;i<aS1.length;i++) { aS1[i].index = i; aS1[i].addEventListener("mouseover",function(){ oh3.innerHTML = data[0].list[this.index].company; aSpan[0].innerHTML = data[0].list[this.index].title; aSpan[1].innerHTML = data[0].list[this.index].recruitingNumbers ; aSpan[2].innerHTML = data[0].list[this.index].workingLocation; aSpan[3].innerHTML = data[0].list[this.index].workExperience; aSpan[4].innerHTML = data[0].list[this.index].education; aSpan[5].innerHTML = data[0].list[this.index].wage; var aLi1H = aLi1[0].offsetHeight;//li高度 var wrapH = wrap.clientHeight;//包裹元素高度 var clientH = document.documentElement.clientHeight;//可视区高度 show.style.display = "block"; var showH = show.offsetHeight; console.log(this.offsetWidth); show.style.left = this.offsetWidth + 20+"px"; if (this.index*aLi1H + showH > clientH) { show.style.top = clientH -showH +"px"; arrow.style.top = this.index*9+"px"; } else{ show.style.top = this.index*aLi1H+"px"; } }); aS1[i].addEventListener("mouseout",function(){ show.style.display = "none"; arrow.style.top = 40+"px"; }); } } </script> </body> </html>