标签：style blog http color java os io ar
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>选项卡</title> 5 <meta http-equiv="content-type" content="text/html" charset="utf-8" accesskey=""/> 6 <script type="text/javascript" src="jquery-1.8.3.js"></script> 7 <style type="text/css"> 8 body,div,ul,li{ 9 margin: 0; 10 padding: 0; 11 } 12 ul{ 13 width: 405px; 14 margin: auto; 15 overflow: hidden; 16 } 17 li{ 18 list-style: none; 19 float: left; 20 width: 100px; 21 height: 30px; 22 line-height: 30px; 23 text-align: center; 24 border: 1px solid #848484; 25 border-right: none; 26 overflow: hidden; 27 cursor: pointer; 28 } 29 li:first-child{ 30 border-bottom: 1px solid #fff; 31 } 32 li:last-child{ 33 border-right: 1px solid #848484; 34 } 35 #wrap{ 36 width: 403px; 37 margin: 70px auto; 38 text-align: center; 39 position: relative; 40 } 41 #wrap div{ 42 position: absolute; 43 text-align: center; 44 width: 100%; 45 height: 200px; 46 line-height: 100px; 47 display: none; 48 border: 1px solid #848484; 49 border-top: none; 50 } 51 #wrap div:first-of-type{ 52 display: block; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="wrap"> 58 <ul> 59 <li name="one"> 许嵩</li> 60 <li name="two">周杰伦</li> 61 <li name="three">林俊杰</li> 62 <li name="four">陈奕迅</li> 63 </ul> 64 <div name="one" dianji="one">庐州月</div> 65 <div name="two" dianji="two">东风破</div> 66 <div name="three" dianji="three">江南 曹操</div> 67 <div name="four" dianji="four">十年 浮夸</div> 68 </div> 69 <script type="text/javascript"> 70 $("li").on("click",function(){ 71 $("#wrap div[name!="+$(this).attr("name")+"]").fadeOut(1000); 72 $("#wrap div[name="+$(this).attr("name")+"]").fadeIn(1000); 73 $("#wrap li[name!="+$(this).attr("name")+"]").css({"border-bottom-color":"#848484"}); 74 $("#wrap li[name="+$(this).attr("name")+"]").css({"border-bottom-color":"#fff"}); 75 }) 76 </script> 77 </body> 78 </html>
标签：style blog http color java os io ar
原文地址：http://www.cnblogs.com/wuxiandiejia/p/3920235.html
