jquery tabs切换效果
tab切换效果
1 .container {width: 500px; margin: 10px auto;} 2 ul.tabs { 3 margin: 0; 4 padding: 0; 5 float: left; 6 list-style: none; 7 height: 32px; 8 border-bottom: 1px solid #999; 9 border-left: 1px solid #999; 10 width: 100%; 11 } 12 ul.tabs li { 13 float: left; 14 margin: 0; 15 padding: 0; 16 height: 31px; 17 line-height: 31px; 18 border: 1px solid #999; 19 border-left: none; 20 margin-bottom: -1px; 21 background: #e0e0e0; 22 overflow: hidden; 23 position: relative; 24 } 25 ul.tabs li a { 26 text-decoration: none; 27 color: #000; 28 display: block; 29 font-size: 1.2em; 30 padding: 0 20px; 31 border: 1px solid #fff; 32 outline: none; 33 } 34 ul.tabs li a:hover { 35 background: #ccc; 36 } 37 html ul.tabs li.active, html ul.tabs li.active a:hover { 38 background: #fff; 39 border-bottom: 1px solid #fff; 40 } 41 .tab_container { 42 border: 1px solid #999; 43 border-top: none; 44 clear: both; 45 float: left; 46 width: 100%; 47 background: #fff; 48 -moz-border-radius-bottomright: 5px; 49 -khtml-border-radius-bottomright: 5px; 50 -webkit-border-bottom-right-radius: 5px; 51 -moz-border-radius-bottomleft: 5px; 52 -khtml-border-radius-bottomleft: 5px; 53 -webkit-border-bottom-left-radius: 5px; 54 } 55 .tab_content { 56 padding: 20px; 57 font-size: 1.2em; 58 }
1 <body> 2 <div class="container"> 3 4 <ul class="tabs"> 5 <li class="active"><a href="#tab1">导航菜单</a></li> 6 <li><a href="#tab4">TAB标签</a></li> 7 <li><a href="#tab5">三四十</a></li> 8 </ul> 9 10 <div class="tab_container"> 11 <div id="tab1" class="tab_content" style="display: block; "> 12 <h3><a href="#">jquery css多级下拉菜单</a></h3> 13 <p id="">多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容</p> 14 </div> 15 16 <div id="tab4" class="tab_content" style="display: none; "> 17 <h2>各种tab标签选项卡</h2> 18 <h3><a href="#">tab标签页面,ajax载入</a></h3> 19 <p> tab标签，jquery ajax载入数据库的内容</p> 20 </div> 21 22 <div id="tab5" class="tab_content" style="display: none; "> 23 <h2>测试内容</h2> 24 </div> 25 </div> 26 27 </div> 28 </body>
1 $(document).ready(function() { 2 3 $(".tab_content").hide(); 4 $("ul.tabs li:first").addClass("active").show(); 5 $(".tab_content:first").show(); 6 7 $("ul.tabs li").click(function() { 8 $("ul.tabs li").removeClass("active"); 9 $(this).addClass("active"); 10 $(".tab_content").hide(); 11 var activeTab = $(this).find("a").attr("href"); 12 $(activeTab).fadeIn(); 13 return false; 14 }); 15 });
