jquery实现tab切换效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="text/css"> .apply-record{ width: 400px; } .apply-record .tab{ height:60px; line-height:60px; } .apply-record .tab .tab-item{ list-style:none; display:inline-block; width:100px; text-align:center; font-size:20px; } .apply-record .tab .tab-item.active{ color: #3F86FF; border-bottom: 3px solid #0000FF; } .products .mainCont { display: none; width:100%; overflow: auto; text-align: center; } .products .mainCont.selected { display: block; } </style> </head> <body> <div class="apply-record"> <ul class="tab"> <li class="tab-item active">页面一</li> <li class="tab-item">页面二</li> <li class="tab-item">页面三</li> </ul> <div class="content products"> <div class="mainCont selected"> 页面一 </div> <div class="mainCont"> 页面二 </div> <div class="mainCont"> 页面三 </div> </div> </div> </body> <script type="text/javascript"> $(function() { $(".apply-record .tab .tab-item").click(function() { $(this).addClass("active").siblings().removeClass("active"); $(".products .mainCont").eq($(this).index()).show().siblings().hide(); }) }) </script> </html>
若文章对您有帮助,帮忙点个赞!
(微信扫码即可登录,无需注册)