jquery实现简单的tab选项卡

Posted 2020-09-30 可以叫我老张

选项卡是大家平时在工作中经常用到的一个效果，下面我给大家一个比较简单的选项卡demo。

 

  html：

<ul class="tab">
       <li>11</li>
       <li class="cur">22</li>
       <li>33</li>
 </ul>
 <div>11</div>
 <div class="on">22</div>
 <div>33</div>

css:

div {
    margin: 0;
    padding: 0;
    width: 184px;
    height: 200px;
    border: 1px solid #ccc;
    display: none;
}

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

.tab li {
    float: left;
    width: 60px;
    height: 30px;
    background: #ccc;
    color: #fff;
    border: 1px solid red;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.on {
    display: block;
}

.tab li.cur {
    background: blue;
}

jquery:

<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>