實現效果：

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