<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> .tab div{ display:none} </style> <script> $(function(){ $(".top a").mouseover(function(){//鼠标移上的时候获取a的下标 var Topindex=$(".top a").index(this); $(".tab").children("div").hide().eq(Topindex).show();//先隐藏所有DIV然后显示对应下标的DIV }) }) </script> </head> <body> <div class="top"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> <div class="tab"> <div class="tab1" style="display:block;">1</div> <div class="tab1">2</div> <div class="tab1">3</div> <div class="tab1">4</div> </div> </body> </html>