超简单 jquery实现tab切换！！！

1.html部分

    <div class="tab-menu">
        <ul>
            <li class="active">内盘</li>
            <li>外盘</li>
            <li>银行OTC</li>
        </ul>
    </div>
    <div class="tabcontent">
        <div class="contentitem">内容一</div>
        <div class="contentitem">内容二</div>
        <div class="contentitem">内容三</div>
    </div>

2.css部分

.tab-menu ul{
    list-style: none;
}
.tab-menu ul li{
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #131625;
    color: #fff;
}
.tab-menu .active {
    color: cadetblue;
}
.tabcontent .contentitem{
    display: none;
}
.tabcontent .contentitem:first-child{
    display: block;
}

3.jQuery部分

<script type="text/javascript">
    $(function(){
        $(".tab-menu li").click(function(){
            $(this).addClass("active").siblings().removeClass();
            var index=$(this).index();
            $(".tabcontent .contentitem").eq(index).show().siblings().hide();
        })
    })
</script>

最终效果