JQuery实现tab页
用ul 和 div 配合实现tab 页
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab页</title> 6 <style> 7 li{ 8 list-style: none; 9 float: left; 10 width: 60px; 11 height: 30px; 12 background: #5F9EA0; 13 border: 2px solid white; 14 text-align: center; 15 } 16 .tabdiv{ 17 width: 500px; 18 height: 300px; 19 background: #5F9EA0; 20 } 21 </style> 22 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 23 <script> 24 $(function(){ 25 //页面加载时，默认第一个标签页与第一个div相连 26 $("li:first").css("border-bottom","4px solid #5F9EA0"); 27 //单击标签事件 28 $("li").click(function(){ 29 //清除底边展示 30 $("li").each(function(){ 31 $(this).css("border-bottom",""); 32 }); 33 $(this).css("border-bottom","4px solid #5F9EA0"); 34 //所有div隐藏 35 $(".tabdiv").each(function(){ 36 $(this).hide(); 37 }); 38 //与其关联的div显示 39 $("#"+$(this).attr("tab")).show(); 40 }) 41 42 }) 43 </script> 44 </head> 45 <body> 46 <ul> 47 <li tab="div1">标签一</li> 48 <li tab="div2">标签二</li> 49 <li tab="div3">标签三</li> 50 </ul> 51 <div id="div0" style="clear: both;"></div> 52 <div class="tabdiv" id="div1" >div1内容</div> 53 <div class="tabdiv" id="div2" style="display: none;">div2内容</div> 54 <div class="tabdiv" id="div3" style="display: none;">div3内容</div> 55 </body> 56 </html>
