本文实例讲述了jQuery实现的tab标签切换效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/basic.css" /> <style type="text/css"> .t-case{ width:715px; height:451px; background-color:#fff; margin:18px auto 0 auto;} .t-case h3{ height:50px; line-height:50px; background-color:#178eb9;} .t-case h3 a{ color:#fff; font-size:22px; padding-left:25px;} .t-case h3 a:hover{ color:#fff; text-decoration:none;} .m-case{ width:715px; height:401px;} .m-case-show{ width:715px; height:291px;} .ui-case-cont{ width:326px; height:291px;} .ui-case-cont img{ width:260px; height:240px; padding:31px 0 0 35px;} .ui-case-info{ width:389px;} .ui-case-info p{ color:#000;} .lb-case-title{font-size:16px; padding-top:76px;} .lb-case-info{ font-size:14px; padding:16px 0 20px 0;} .lb-case-item{ font-size:12px; line-height:20px;} .ui-case-info a{ width:130px; height:33px; line-height:33px; display:block; border-radius:3px; font-size:16px; font-weight:bold; color:#fff; text-align:center; margin-top:22px;} .ui-case-info a:hover{ color:#fff; text-decoration:none;} .lb-zixun{ background-color:#b2aeaf;} .lb-guahao{ background-color:#fa6101; margin-left:20px;} .m-case-img{} .m-case-img a{ width:127px; height:78px; display:block; margin-left:10px; _margin-left:8px; border:2px solid #fff;} .m-case-img a:hover{ border:2px solid #178eb9;} .m-case-img a img{ width:127px; height:78px;} .ui-patient-item{ margin:9px 0 0 24px;} .ui-patient-item a{ width:115px; height:38px; display:block; background-color:#178eb9; color:#fff; line-height:38px; text-align:center; margin:2px 5px 0 0;} .ui-patient-item a:hover{ color:#fff; text-decoration:none;} </style> </head> <body> <div> <h3><a href="###">测试</a></h3> <div> <div id="incase1"> <div><img src="img/case1.jpg" /></div> <div> <p>人名1 职业名称</p> <p>擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXX医生</p> <p>XXXXXXXXXXXX证书</p> <p>XXXXXXXXXXXXXXXXXXXXX会员</p> <a href="###">在线咨询</a> <a href="###">预约挂号</a> </div> </div> <div id="incase2"> <div><img src="img/case1.jpg" /></div> <div> <p>人名2 职业名称</p> <p>擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXX医生</p> <p>XXXXXXXXXXXX证书</p> <p>XXXXXXXXXXXXXXXXXXXXX会员</p> <a href="###">在线咨询</a> <a href="###">预约挂号</a> </div> </div> <div id="incase3"> <div><img src="img/case1.jpg" /></div> <div> <p>人名3 职业名称</p> <p>擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXX医生</p> <p>XXXXXXXXXXXX证书</p> <p>XXXXXXXXXXXXXXXXXXXXX会员</p> <a href="###">在线咨询</a> <a href="###">预约挂号</a> </div> </div> <div id="incase4"> <div><img src="img/case1.jpg" /></div> <div> <p>人名4 职业名称</p> <p>擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXX医生</p> <p>XXXXXXXXXXXX证书</p> <p>XXXXXXXXXXXXXXXXXXXXX会员</p> <a href="###">在线咨询</a> <a href="###">预约挂号</a> </div> </div> <div id="incase5"> <div><img src="img/case1.jpg" /></div> <div> <p>人名5 职业名称</p> <p>擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXX医生</p> <p>XXXXXXXXXXXX证书</p> <p>XXXXXXXXXXXXXXXXXXXXX会员</p> <a href="###">在线咨询</a> <a href="###">预约挂号</a> </div> </div> <div> <a href="###" id="case1"><img src="img/case1_img.jpg" /></a> <a href="###" id="case2"><img src="img/case2_img.jpg" /></a> <a href="###" id="case3"><img src="img/case3_img.jpg" /></a> <a href="###" id="case4"><img src="img/case4_img.jpg" /></a> <a href="###" id="case5"><img src="img/case5_img.jpg" /></a> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#case1').css('border-color','#178eb9'); $('.m-case-img>a').mouseover(function(){ var caseId = $(this).attr('id'); $('#in'+caseId).show().siblings('.m-case-show').hide(); $('#'+caseId).css('border-color','#178eb9').siblings('.m-case-img>a').css('border-color','#fff'); }); }); </script> </body> </html>
效果图：
希望本文所述对大家jQuery程序设计有所帮助。