选项卡

HTML

<div class="affix">
    <h3>用户中心</h3>
    <ul>
        <li class="active"><a href="#container-my-order">我的订单</a></li>
        <li><a href="#container-buy-stat-canvas">消费统计(原生版)</a></li>
        <li><a href="#container-buy-stat-svg">消费统计</a></li>
        <li><a href="#container-luck-lottery">幸运抽奖</a></li>
    </ul>
</div>
<!--右侧占全部-->
<div class="right">
    <div id="container-my-order" class="active">我的订单</div>
    <div id="container-buy-stat-canvas">消费统计</div>
    <div id="container-buy-stat-svg">消费统计</div>
    <div id="container-luck-lottery">幸运抽奖</div>

</div>

CSS

.affix{
    float: left;
    width: 210px;
    min-height: 200px;
    padding: 1em;
}
.right{
    margin-left: 210px;
    min-height: 200px;
    padding: 1em;
}
.affix li{
line-height: 2em;
    padding: 1em;
}
.affix li.active>a{
    color: #E4393C;
    font-weight: bold;
}
.right div.active{
   display: block;
}
.right div{
    display: none;
}

JQ

$(".affix>ul").on(‘click‘,‘a‘,function(e){
    e.preventDefault();
    $(this).parent().addClass(‘active‘).siblings().removeClass(‘active‘);
    $id=$(this).attr(‘href‘);
    $($id).addClass(‘active‘).siblings().removeClass(‘active‘);
})

效果

选项卡

原文：http://www.cnblogs.com/liangfc/p/7392662.html