<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .menu ul li{ display:inline-block; width:100px; height:34px; background:#ccc; margin-right:15px; line-height:34px; text-align:center; cursor:pointer } .menu .menu_nr{ width:300px; height:34xp; border:1px solid pink; margin-left:50px; display:none; } .on{background:#1e88e5!important;color:#fff;} </style> <div class="menu"> <ul> <li class="on">昨天</li> <li>今天</li> <li>明天</li> </ul> <div style="display:block" class="menu_nr">昨天</div> <div class="menu_nr">今天</div> <div class="menu_nr">明天</div> </div> </body> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script type = "text/javascript" > $(document).ready(function() { // 选项卡移入事件 $('.menu ul li').mouseover(function(){ $(this).addClass('on'); $(this).siblings().removeClass(); var index=$(this).index(); $('.menu .menu_nr').hide(); $('.menu .menu_nr:eq('+index+')').show(); }); }); </script> </html>