用jQuery實現選項卡

一、案例描述

在瀏覽器中顯示一個選項卡界面，頭部爲1、2、3、4、5。點擊頭部任意一個數字，都在下方顯示出不同的信息，並且鼠標停留在任意一個數字上時，數字的顏色改變。案例如下圖所示

• 默認的是數字1中的內容
  
• 點擊數字二

• 點擊其他數字效果相同，在這裏就不一一展示了

二、HTML代碼

1、全部HTML代碼展示

    <div id="table">
        <!-- 頭部 -->
        <div id="header">
            <ul>
                <li class="selected">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
                <li>
                    <a href="#">5</a>
                </li>
            </ul>
        </div>
        <!-- 內容 -->
        <div id="content">
            <div class="dom show" >
                <ul>
                    <li> <a href="#">我是第一個選項卡的內容1</a></li>
                    <li> <a href="#">我是第一個選項卡的內容2</a></li>
                    <li> <a href="#">我是第一個選項卡的內容3</a></li>
                    <li> <a href="#">我是第一個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第二個選項卡的內容1</a></li>
                    <li> <a href="#">我是第二個選項卡的內容2</a></li>
                    <li> <a href="#">我是第二個選項卡的內容3</a></li>
                    <li> <a href="#">我是第二個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第三個選項卡的內容1</a></li>
                    <li> <a href="#">我是第三個選項卡的內容2</a></li>
                    <li> <a href="#">我是第三個選項卡的內容3</a></li>
                    <li> <a href="#">我是第三個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第四個選項卡的內容1</a></li>
                    <li> <a href="#">我是第四個選項卡的內容2</a></li>
                    <li> <a href="#">我是第四個選項卡的內容3</a></li>
                    <li> <a href="#">我是第四個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第五個選項卡的內容1</a></li>
                    <li> <a href="#">我是第五個選項卡的內容2</a></li>
                    <li> <a href="#">我是第五個選項卡的內容3</a></li>
                    <li> <a href="#">我是第五個選項卡的內容4</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

2、HTML代碼分解 ----頭部

頭部由一個包含了5個 li標籤 的列表構成，每個 li標籤 中都包含一個 a標籤

這裏的selected選擇器的作用是 改變選中的 li標籤 的背景顏色

<div id="header">
            <ul>
                <li class="selected">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
                <li>
                    <a href="#">5</a>
                </li>
            </ul>
        </div>

3、HTML代碼分解 ----內容

（1）在這裏每一個含有dom選擇器的 div 依次代表的是每一個選項卡的內容
（2）.dom選擇器中設置display:none;使每一個選項卡內容隱藏。而對展現的內容另外加一個 style="display: block" 的屬性,使其展現在瀏覽器上

 <div id="content">
            <div class="dom show" >
                <ul>
                    <li> <a href="#">我是第一個選項卡的內容1</a></li>
                    <li> <a href="#">我是第一個選項卡的內容2</a></li>
                    <li> <a href="#">我是第一個選項卡的內容3</a></li>
                    <li> <a href="#">我是第一個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第二個選項卡的內容1</a></li>
                    <li> <a href="#">我是第二個選項卡的內容2</a></li>
                    <li> <a href="#">我是第二個選項卡的內容3</a></li>
                    <li> <a href="#">我是第二個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第三個選項卡的內容1</a></li>
                    <li> <a href="#">我是第三個選項卡的內容2</a></li>
                    <li> <a href="#">我是第三個選項卡的內容3</a></li>
                    <li> <a href="#">我是第三個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第四個選項卡的內容1</a></li>
                    <li> <a href="#">我是第四個選項卡的內容2</a></li>
                    <li> <a href="#">我是第四個選項卡的內容3</a></li>
                    <li> <a href="#">我是第四個選項卡的內容4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li> <a href="#">我是第五個選項卡的內容1</a></li>
                    <li> <a href="#">我是第五個選項卡的內容2</a></li>
                    <li> <a href="#">我是第五個選項卡的內容3</a></li>
                    <li> <a href="#">我是第五個選項卡的內容4</a></li>
                </ul>
            </div>
        </div>

三、CSS樣式

css代碼就不做詳細的說明了

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        list-style: none;
    }
    a {
        display: inline-block;
        color: black;
        float: left;
        text-align: center;
    }
    #table {
        width: 500px;
        height: 170px;
        margin: 0 auto;
        margin-top: 50px;
        border: 1px solid #e0e0e0;
    }
    /* 頭部樣式 */
    #table #header {
        width: 100%;
        height: 50px;
    }
    #table #header a {
        width: 20%;
        line-height: 50px;
        background-color: #e0e0e0;
    }
    #table #header a:hover {
        color: red;
    }
    #table #header .selected a{
        background-color:whitesmoke;
    }

    /* 內容樣式 */
    #table #content {
        width: 100%;
        height: 120px;
    }
    #table #content .dom {
        margin-top: 10px;
        display: none;
    }
    #table #content .dom a{
        width: 50%;        
        padding: 10px 0;
    }
    #table #content .show {
      display: block;
    }

四、jQuery核心代碼

這裏有幾點是需要大噶注意的！！！
（1）在改變點擊的 li標籤 的樣式之前必須先將所有選項卡都恢復場未點擊的樣式
（2）這裏用到了 index()方法 來找到找到點擊的 li標籤 所對應的內容
（3）在展示所點擊選項的內容之前要先將所有選項卡內容都隱藏
請大家理解註釋部分！

<script src="../jquery.js"></script>
<script>
    $(function() {      
      //監聽選項卡的點擊事件
      $("#header>ul>li").click(function() {
        //先將所有選項卡都恢復場未點擊的樣式
        $("#header>ul>li").removeClass("selected");
        //改變點擊的li標籤的樣式
        $(this).addClass("selected");
        //獲取當前點擊li標籤的索引
        var $index = $(this).index();
        //根據索引找到對應的內容
        var $content = $("#content>div").eq($index)
        //先將所有選項卡內容都隱藏
        $("#content>div").removeClass("show");
        //展示所點擊選項的內容
        $content.addClass("show");
         
      });
    });
</script>

五、文末分享

這篇案例的姊妹篇：用原生JS實現選項卡
溫馨提示：本案例HTML代碼和CSS樣式稍作修改，即增加了一個類選擇器 show，其餘部分HTML代碼和CSS樣式內容相同
原創不易，點個贊叭