by 张克军
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <script src="http://t.douban.com/js/jquery.min.js" async="true"></script> <script src="http://t.douban.com/js/do.js"></script> <style type="text/css"> /* Reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0} body{padding:10em;font:12px/1.5 arial,sans-serif} /* Tab */ .tabs{width:100%;overflow:hidden;margin-bottom:20px} .tabs ul{float:left;-moz-box-shadow:#ddd 3px 3px 3px;-webkit-box-shadow:#ddd 3px 3px 3px} .tabs li{float:left;margin-left:-1px;border:1px solid #666;border-bottom:1px solid #dfdfdf; /* 上的左右圆角 */ -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; /* 渐变 */ background-image:-moz-linear-gradient(0, #ddd 1%, #f5f5f5 3%, #f5f5f5 100%); -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; background-image:-webkit-gradient(linear, left top, right top, color-stop(0.01, #ddd), color-stop(0.03, #f5f5f5), color-stop(1, #f5f5f5)) } .tabs li:first-child{margin:0;background:#f5f5f5} .tabs li.on{background:#fff;border-bottom:none} .tabs li a{display:block;*display:inline-block;height:27px;padding:0 20px;text-align:center;line-height:27px;overflow:hidden;color:#333;outline:0} .tabs li.on a, .tabs li a:link,.tabs li a:visited{color:#333;text-decoration:none} .tabs .others{overflow:auto;height:28px;*display:inline-block;border-bottom:1px solid #dfdfdf;text-align:right} </style> </head> <body> <div class="tabs"> <ul> <li><a href="page1.html">正在收听</a></li> <li><a href="page2.html">最近播放过的歌曲</a></li> <li class="on"><a href="page3.html">好友的电台</a></li> <li><a href="page4.html">常见问题</a></li> </ul> <div class="others"> </div> </div> <script> Do(function () { $('.tabs a').click(function (e) { e.preventDefault(); $('.tabs .on').removeClass('on'); $(this).parent().addClass('on'); }); }); </script> </body> </html>