一个简单的tab切换代码；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <style type="text/css"> #nav_list{height:25px; width:300px;} #nav_list div{ float:left; width:100px; line-height:25px; background:#666; text-align:center;} #nav_list div.cur{ background:#C63; color:#fff;} #nav_con{ width:298px; height:200px; border:solid 1px #999;} #nav_con div{ display:none;} </style> <div id="nav_list"> <div class="cur">nav1</div> <div>nav2</div> <div>nav3</div> </div> <div id="nav_con"> <div style="display:block">tab1tab1tab1tab1tab1tab1tab1</div> <div>tab2tab2tab2tab2tab2tab2tab2</div> <div>tab3tab3tab3tab3tab3tab3tab3</div> </div> <script type="text/javascript"> $("#nav_list div").hover(function(){//如果想点击再切换的话把hover改成click $(this).addClass('cur').siblings().removeClass('cur');//鼠标滑过时给当前的div添加class var $index = $("#nav_list div").index(this);//获取当前的索引值 $("#nav_con div").eq($index).show().siblings().hide();//tab内容等于当前鼠标滑过的索引值时，显示对应的内容 return true; },function(){ return false;//鼠标离开执行的操作，返回一个flase }); </script> </body> </html>