Animated Tab – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animated Tab</title> <style type="text/css"> /* If you don't want the animation remove the commented properties. Thank you */ *{ margin:0; padding:0; box-sizing:border-box; font-family:tahoma; } a{ text-decoration:none; } .clear{ clear:both; } nav{ width:400px; margin:10px auto; } nav a{ display:inline-block; width:100px; height:30px; float:left; line-height:30px; background-color:#ca4027; color:#fff; font-size:13px; text-align:center; border-right:1px solid #672114; } nav a:last-child{ border:none; } .tabContainer{ width:400px; height:150px; margin:0 auto; overflow:hidden; text-align:center; position:relative; } .Tabcondent{ position:absolute; width:50%; height:50%; background-color:#dc5f48; color:#fff; text-align:center; line-height:150px; opacity:0; border-radius:32px;left:0; right:0; top:0; bottom:0; margin:37px auto; transition:all ease-in-out 0.3s; /* display:none; */ } a.active{ background-color:#672114; } .Tabcondent.active{ width:100%; height:100%; opacity:1; border-radius:0px; transition:all ease-in-out 0.6s; margin:0 auto; /* display:block */ } </style> </head> <body> <nav> <a href="javascript:void(0);" data-tab="one" class="active">One</a> <a href="javascript:void(0);" data-tab="two">Two</a> <a href="javascript:void(0);" data-tab="three">Three</a> <a href="javascript:void(0);" data-tab="four">Four</a> <div class="clear"></div> </nav> <div class="tabContainer"> <div id="one" class="Tabcondent active">Tab One</div> <div id="two" class="Tabcondent">Tab Two</div> <div id="three" class="Tabcondent">Tab Three</div> <div id="four" class="Tabcondent">Tab Four</div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('nav a').click(function(){ var tabId = $(this).attr('data-tab'); $('nav a').removeClass('active'); $('.Tabcondent').removeClass('active'); $(this).addClass('active'); $('#'+tabId).addClass('active'); }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Animated Tab