<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div,ul,li,a{margin: 0;padding: 0;} li{list-style: none;} a{text-decoration: none;color: #000;font-size: 12px;} a:hover{color: #F00;} /**/ .change{width:298px;height: 98px;border: 1px solid #eee;margin:0 auto;} .box_title{width:100%;height: 27px;overflow: hidden;background: #f7f7f7; } .box_title ul{width: 110%;height: 27px;} .box_title li{height:26px;line-height:26px;text-align:center;width: 59px;float:left;border-left:1px solid #f7f7f7;border-right:1px solid #f7f7f7;border-bottom:1px solid #eee;margin-left: -1px;} .box_content{width:298px;margin: 12px 0 0 15px;overflow: hidden; } .box_content li{float: left;width: 130px;height: 24px;padding-left: 4px;} .box_title .current{position: relative;border-left:1px solid #eee;border-right:1px solid #EEE;background: #fff;border-bottom: 1px solid #FFF;} </style> </head> <body> <div id="box"> <div> <ul> <li><a href="##">公告</a></li> <li><a href="##">規則</a></li> <li><a href="##">論壇</a></li> <li><a href="##">安全</a></li> <li><a href="##">公益</a></li> </ul> </div> <ul> <li><a href="##">1賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> <li><a href="##">1賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> </ul> <ul style="display: none;"> <li><a href="##">2賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> <li><a href="##">2賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> </ul> <ul style="display: none;"> <li><a href="##">3賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> <li><a href="##">3賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> </ul> <ul style="display: none;"> <li><a href="##">4賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> <li><a href="##">4賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> </ul> <ul style="display: none;"> <li><a href="##">5賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> <li><a href="##">5賣家有望歸入國家社保</a></li> <li><a href="##">賣家有望歸入國家社保</a></li> </ul> </div> </body> <script> var boxObj=document.getElementById("box"); var ulObj=boxObj.getElementsByTagName("ul"); var liObj=ulObj[0].getElementsByTagName("li"); for(var i=0;i<liObj.length;i++){ liObj[i].index=i;//記錄當前的位置.index爲自定義屬性 liObj[i].onmouseover=function(){ if(this.className=="current") return;//若是當前對象已經選中,直接跳出 var oldNode;//用來存儲原來current的位置 var newNode=this.index; for(var j=0;j<liObj.length;j++) { if(liObj[j].className=="current") { oldNode=j; } } ulObj[oldNode+1].style.display="none"; liObj[oldNode].className=""; liObj[newNode].className="current"; ulObj[newNode+1].style.display=""; } } </script> </html>