<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>JQUERY+CSS3 fillet tab TAB Toggle </title>
<style>
*{margin:0;padding:0;}
Body{font:14px Georgia, serif;}
h1{width:310px;margin:0 auto;padding:20px 0;color: #222;}
. Group:before,
. Group:after{content: "";d isplay:table;}
. Group:after{clear:both;}
. Group{zoom:1;}
Body{background: #222;}
#content {background:white;min-height:400px;}
. tabs{list-style:none;margin:60px auto 0;width:660px;}
. Tabs li{float:left;position:relative;}
. 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;}
. tabs. Active{z-index:3;}
. tabs. Active A{background:white;color:black;}
. Tabs Li:before,. Tabs li:after,.tabs li A:before,. Tabs Li a:after{position:absolute;bottom:0;}
. 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: "";
. Tabs. Active:before,. Tabs. active:after{background:white;z-index:1;
. Tabs Li:before,. Tabs li:after{background: #ddc385; width:10px;height:10px;}
. Tabs li:before{left: -10px;}
. Tabs li:after{right: -10px;}
. tabs Li A:after,. Tabs Li A:before{width:20px;height:20px;-webkit-border-radius:10px;-moz-border-radius:10px;borde R-radius:10px;background: #222; z-index:2;}
. Tabs. Active A:after,. Tabs. Active A:before{background: #ddc385;}
. Tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background: #222;}
. Tabs Li a:before{left: -20px;}
. Tabs Li a:after{right: -20px;}
</style>
<script src= "/ajaxjs/jquery-1.6.2.min.js" ></script>
<script>
$ (function () {
$ ("Li"). Click (function (e) {
E.preventdefault ();
$ ("Li"). Removeclass ("active");
$ (this). AddClass ("active");
});
});
</script>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<ul class= "tabs Group" >
<li class= "Active" ><a href= "#one" >One</a></li>
<li><a href= "#two" >Two</a></li>
<li><a href= "#three" >Three</a></li>
<li><a href= "#three" >Four</a></li>
</ul>
<div id= "Content" >
</div>
</body>
CSS3 Round tab TAB code