jquery实现简单的tab选项卡

选项卡是大家平时在工作中经常用到的一个效果，下面我给大家一个比较简单的选项卡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>