jq实现选项卡

实现效果：

<ul class="t-ul">
    <li class="active">吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

<div class="tab-box">
    <div>吃饭</div>
    <div>睡觉</div>
    <div>打豆豆</div>
</div>

$(function () {
   $(".t-ul li").click(function () {
      //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
      var _index = $(this).index();
      //让内容框的第 _index 个显示出来，其他的被隐藏
      $(".tab-box>div").eq(_index).show().siblings().hide();
      //改变选中时候的选项框的样式，移除其他几个选项的样式
      $(this).addClass("active").siblings().removeClass("active");
   });
});

 * {
        margin: 0;
        padding: 0;
    }

    .tab-box{
        width: 350px;
        margin: 20px 350px;
        text-align: center;
    }

    .tab-box div{
        display: none;
    }

    .tab-box div:first-child{
        display: block;
    }

    .t-ul {
        margin: 100px 300px 0;
    }

    .active {
        border-bottom: 1px solid blue;
    }

    .t-ul li {
        display: inline-block;
        list-style: none;
        cursor: pointer;
        padding: 6px 12px;
        width: 107px;
        text-align: center;
        margin: 0 10px;
    }