<スタイル>
*{margin: 0;padding: 0;}
body{font: 14px Georgia、serif;}
h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;}
.group:前、
.group: after{content: "";display: table;}
.group: after{clear: Both;}
.group{zoom: 1;}
body{background: #222;}
#content {背景: 白;最小高さ: 400 ピクセル;}
.tabs{リスト スタイル: なし;マージン: 60 ピクセル自動 0;幅: 660 ピクセル;}
.tabs li{浮動小数点: 左;位置: 相対;}
.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{背景: 白;色: 黒;}
.tabs li: 前、.tabs li: 後、.tabs li a: 前、.tabs li a: 後{位置: 絶対;ボトム: 0;}
.tabs li: 最後の子: 後, .tabs li: 最後の子 a: 後,.tabs li: 最初の子: 前, .tabs li: 最初の子 a : 前,.tabs .active: 後, .tabs .active: 前,.tabs .active a: 後, .tabs .active a: before{content: "";}
.tabs .active: 前, .tabs .アクティブ: 後{背景: 白;z-index: 1;}
.tabs li: 前、.tabs li: 後{背景: #ddc385;幅: 10px;高さ: 10px;}
.tabs li: 前{左: -10px;}
.tabs li: 後{right: -10px;}
.tabs li a: 後、.tabs li a: before{幅: 20px;高さ: 20px;-webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;background: #222;z-index: 2;}
.tabs .active a: 後、.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;}



$(function(){
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("active");
$(this)。 addClass("アクティブ");

• One
 

• Two
 

• Three


• 4