<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ height: 300px; width: 400px; border:1px solid #000; margin: 100px auto; } .mt span{ display: inline-block; width: 93px; height: 50px; border: 1px solid #333; text-align: center; line-height: 50px; background: #ff3; } .mt span.current{ background: purple; } ul li{ list-style: none; float: left; width: 400px; height: 250px; border: 1px solid #e0e0e0; display: none; background: purple; } ul li.show{ display: block; } </style> </head> <body> <div class="box"> <div class="mt"> <span class="current">新闻</span> <span>体育</span> <span>娱乐</span> <span>八卦</span> </div> <div class="mb"> <ul> <li class="show">新闻模块</li> <li>体育模块</li> <li>娱乐模块</li> <li>八卦模块</li> </ul> </div> </div> </body> </html> <script> window.onload=function () { var spans=document.getElementsByTagName('span'); var lis=document.getElementsByTagName('li'); for(var i=0;i<spans.length;i++){ // 得到span的索引 spans[i].index=i; spans[i].onmouseover=function () { for(var j=0;j<spans.length;j++){ spans[j].className=' '; lis[j].className=' '; } this.className='current'; lis[this.index].className='show'; } } } </script>