使用jQuery实现选项卡功能

Question

使用jQuery实现选项卡功能，如下图所示，要求如下：
选项卡起始固定显示其中一项；
单击时可却换选项卡。

Answer 1

改了下样式，和题主的差不多了

<style>
    div {
        margin: 0;
        padding: 0;
        height: 200px;
        border: 1px solid #aaa;
        display: none;
    }

    .tab {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }

        .tab li {
            float: left;
            width: 60px;
            height: 30px;
            background: #eee;
            color: #000;
            border: 1px solid #aaa;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            margin-right:5px;border-bottom:0
        }

    .on {
        display: block;
    }

    .tab li.cur {
        background: #6588b2;
        color:#fff
    }
</style>
<ul class="tab">
    <li>最新</li>
    <li class="cur">热门</li>
    <li>新闻</li>
</ul>
<div>11</div>
<div class="on">22</div>
<div>33</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".tab li").click(function () {
            $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
            $("div").hide().eq($(this).index()).show();

        });
    });
</script>

jquery选项卡 jquery tab选项卡 https://www.jq22.com/webqd960