注意：引用jq
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡切换</title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> </head> <style type="text/css"> <!-- 选项卡样式 -->.info { width: 280px; background-color: #366; float: right; } .info ul { list-style: none; } .info ul li { float: left; } .info li span { border: 1px solid #CCF; border-bottom: none; cursor: pointer; background-color: #00C4C4; color: #FFF; display: block; width: 75px; height: 25px; line-height: 25px; text-align: center; } .info .tab-content { width: 280px; height: 378px; border: 1px solid #CCF; position: absolute; left: 48px; overflow: auto; display: none; } </style> <body> <div class="info"> <!-- 选项卡 --> <ul> <li> <span style="background-color:#FFF; color:#339;">临床诊断</span> <div class="tab-content" style="display:block;">123<br/> abc <br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>a<br/>a<br/>a<br/> a <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> </div> </li> <li> <span>病史摘要</span> <div class="tab-content">456</div> </li> <li> <span>临床表现</span> <div class="tab-content">789</div> </li> </ul> </div> <!--脚本--> <script type="text/javascript"> //选项卡实现 $(".info li").click(function() { var selLi = $(this); $(".info .tab-content").each(function() { if($(this).parent().is(selLi)) { $(this).prev().css("background", "#FFF"); $(this).prev().css("color", "#339"); $(this).show(); } else { $(this).prev().css("background", "#00C4C4"); $(this).prev().css("color", "#FFF"); $(this).hide(); } }); }); </script> </body> </html>