<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .title { 100px;height:30px;border:1px solid red; margin:3px;float:left; } .content { 420px;height:300px;border:1px solid blue; clear:both; } </style> <script src="scripts/jquery-1.7.1.js"></script> <script> $(function () { $('.title').mouseover(function () { var index = $(this).index(); var divContent=$('.content') switch (index) { case 0: divContent.html('<h1>00000000</h1>'); break; case 1: divContent.html('<h1>111111</h1>'); break; case 2: divContent.html('<h1>22222222</h1>'); break; case 3: divContent.html('<h1>333333333</h1>'); break; } }); }); </script> </head> <body> <div class="title">一带一路</div> <div class="title">互联网+</div> <div class="title">亚投行</div> <div class="title">京津冀一体化</div> <div class="content"></div> </body> </html>