1.代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script> <style type="text/css"> body,div,ul{ padding:0; margin:0;} #container{width:800px; margin:50px;} .tab{ padding:0; margin:0; } .tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;} .content{ float:none; padding-top:30px; border:solid 1px black; clear:both; } .content div{ border-top:0px; height:60px;} .tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1} .tab_current{ text-decoration:underline;} </style> <script language="javascript" type="text/javascript"> $( function() { $(".content div:gt(0)").hide(); $(".tab li").css("cursor", "pointer"); $(".tab li").hover(function() { $(this).addClass("tab_current"); }, function() { $(this).removeClass("tab_current"); }).click( function() { $(this).addClass("tab_selected").siblings().removeClass("tab_selected"); $(".content div").eq($(this).index()).siblings().hide().end().show(); } ) } ); </script> </head> <body> <div id="container"> <div class="tab"> <ul> <li class="tab_selected">选项卡A</li> <li>选项卡B</li> <li>选项卡C</li> </ul> </div> <div class="content"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </body> </html>
2.效果图：
