<p class="sycode"> <br> </p> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <title>jQuery+css3圆角tab选项卡切换</title> <br> <style> <br /> *{margin: 0;padding: 0;} <br /> body{font: 14px Georgia, serif;} <br /> h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;} <br /> .group: before, <br /> .group: after{content: "";display: table;} <br /> .group: after{clear: both;} <br /> .group{zoom: 1;} <br /> body{background: #222;} <br /> #content{background: white;min-height: 400px;} <br /> .tabs{list-style: none;margin: 60px auto 0;width: 660px;} <br /> .tabs li{float: left;position: relative;} <br /> .tabs a{float: left;padding: 10px 40px;text-decoration: none;color: black;background: #ddc385;-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;} <br /> .tabs .active{z-index: 3;} <br /> .tabs .active a{background: white;color: black;} <br /> .tabs li: before, .tabs li: after,.tabs li a: before, .tabs li a: after{position: absolute;bottom: 0;} <br /> .tabs li: last-child: after, .tabs li: last-child a: after,.tabs li: first-child: before, .tabs li: first-child a: before,.tabs .active: after, .tabs .active: before,.tabs .active a: after, .tabs .active a: before{content: "";} <br /> .tabs .active: before, .tabs .active: after{background: white;z-index: 1;} <br /> .tabs li: before, .tabs li: after{background: #ddc385;width: 10px;height: 10px;} <br /> .tabs li: before{left: -10px;} <br /> .tabs li: after{right: -10px;} <br /> .tabs li a: after, .tabs li a: before{width: 20px;height: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: #222;z-index: 2;} <br /> .tabs .active a: after, .tabs .active a: before{background: #ddc385;} <br /> .tabs li: first-child.active a: before,.tabs li: last-child.active a: after{background: #222;} <br /> .tabs li a: before{left: -20px;} <br /> .tabs li a: after{right: -20px;} <br /> </style> <br> <script src="/ajaxjs/jquery-1.6.2.min.js"></script> <br> <script> <br /> $(function(){ <br /> $("li").click(function(e) { <br /> e.preventDefault(); <br /> $("li").removeClass("active"); <br /> $(this).addClass("active"); <br /> }); <br /> }); <br /> </script> <br> <br> <br> <div><a href="http://www.999jiujiu.com/"> http://www.999jiujiu.com/</a></div> <br> <ul class="tabs group"> <br> <li class="active"><a href="#one">One</a></li> <br> <li><a href="#two">Two</a></li> <br> <li><a href="#three">Three</a></li> <br> <li><a href="#three">Four</a></li> <br> </ul> <br> <div id="content"> <br> <h1>Round Out Tabs</h1> <br> </div> <br> <br>
