HTML结构css样式代码
- Tab1
- Tab2
- Tab3
First tab content
First tab content
Secend tab content
First tab content
Third tab content
First tab content
.tabPanel ul{height:30px;border-bottom:1px solid #aaa;} .tabPanel ul li{ float:left;margin:0 2px 0 0;border:1px solid #aaa;font-size:11px;height:29px;line-height:30px;width:111px;text-align:center;cursor:pointer; text-shadow:0 1px 0 #fff; border-radius:4px 4px 0 0; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5); background:#ddd; background:-moz-linear-gradient(top, #eee, #ddd); background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); } .tabPanel .hit{ border-bottom:1px solid #fff;cursor:pointer;color:black;text-shadow:0 1px 0 #fff; background:#fff; background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff)); background:-moz-linear-gradient(top, #e1e1e1, #fff); } .pane{border:1px solid #aaa;border-top:0;min-height:100px;background-color:#fff;display:none;} .pane p{padding:15px 15px 0 10px;} .pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}最后js实现切换$('.tabPanel ul li').click(function () { $(this).addClass('hit').siblings().removeClass('hit'); $('.panes>div:eq(' + $(this).index() + ')').show().siblings().hide(); })