Jquery做个简单的tab标签；

css部分：

<style>
        body, html, ul, p {
            margin: 0;
            padding: 0;
        }
        .tab-box {
            width: 320px;
            height: 600px;
            border: 1px solid #ccc;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -160px;
        }
        li {
            list-style: none;
            float: left;
            width: 80px;
            height: 45px;
            font-size: 14px;
            background-color: #ccc;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .tab-title li.sel {
            background-color: red;
            color: #fff;
        }
        .tab-con {
            margin-top: 45px;
            line-height: 24px;
            text-align: justify;
        }
        .tab-con > div {
            display: none;
            padding: 5px;
            font-size: 12px;
        }
        .tab-con > div.show {
            display: block;
        }
</style>

　

html部分：

<div class="tab-box">
    <ul class="tab-title">
        <li class="sel">第一句</li>
        <li>第二句</li>
        <li>第三句</li>
        <li>第四句</li>
    </ul>
    <div class="tab-con">
        <div class="show">
            <p>朝辞白帝彩云间</p>
        </div>
        <div>
            <p>千里江陵一日还</p>
        </div>
        <div>
            <p>两岸猿声啼不住</p>
        </div>
        <div>
            <p>轻舟已过万重山</p>
        </div>
    </div>
</div>

　　

js部分：

<script>
    $(function () {
        $(".tab-title li").click(function () {
            $(this).addClass("sel").siblings().removeClass("sel");
            var index = $(this).index();
            $(".tab-con div").eq(index).addClass("show").siblings().removeClass("show");
        })
    })
</script>

　　

效果展示：