css3圓角tab選項卡程式碼
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css3圓角tab選項卡切換</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: "";display: 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;border-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>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">
<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">
<h1>Round Out Tabs</h1>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css3圓角tab選項卡切換</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: "";display: 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;border-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>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">
<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">
<h1>Round Out Tabs</h1>
</div>
</body>
</html>