代码展示：

HTML代码

<!-- 选项卡的标题部分 -->
<ul class="title">
    <li class="active">新闻</li>
    <li>视频</li>
    <li>图片</li>
</ul>
<!-- 选项卡的内容部分 -->
<div class="content">
    <div class="con-item">新闻内容</div>
    <div class="con-item" style="display: none;">视频内容</div>
    <div class="con-item" style="display: none;">图片内容</div>
</div>

CSS代码

/* 初始化的样式 */
*{
    margin:0px;
    padding:0px;
    font-family:微软雅黑;
}
html,body{
    width: 100%;
    height: 100%;
}
a{
    color:#333;
    text-decoration: none;
}
ul,li,ol{
    list-style: none;
}
img{
    border:0px;   /*处理兼容   给图片标签加上超链接的时候，在ie浏览器中会有一个蓝色边框*/
}
/* 选项卡标题 */
.title{
    width:200px;
    height: 35px;
    margin:0 auto;
    margin-top:30px;
    background-color: red;
}
.title li{
    float: left;
    width: 33.3%;
    text-align: center;
    line-height: 35px;
    letter-spacing: 2px;
    cursor: pointer;
}
.active{
    background-color:#4021af;
    color:#fff;
    font-weight: bold;

}
/* 选项卡内容 */
.content{
    width: 198px;
    height: 320px;
    margin:0 auto;
    /* background-color: red; */
    border:1px solid #cecece;
}

下面就是重要的js代码

<script>
    $(function(){
        $(".title li").click(function(){
        //给单击的li标签添加active
            $(this).addClass('active').siblings().removeClass('active')
            // 设置内容的显示和隐藏
            var titIndex = $(this).index()  // 获取当前点击的li的索引 这个索引和它对应的内容索引相同
                                                                $('.conitem').eq(titIndex).css({'display':'block'}).siblings().css({'display':'none'})
                                                                            //$('.conitem:eq('+titIndex+')').eq(titIndex).css({'display':'block'}).siblings().css({'display':'none'})
        })
     })
</script>