jQuery选项卡Tab切换代码特效_jquery实现简单的选项卡

HTML结构Tab1Tab2Tab3First tab contentFirst tab contentSecend tab contentFirst tab contentThird tab contentFirst tab contentcss样式代码.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(); })

在线演示        积分下载        6毛下载        砍两刀下载