用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样式内容相同
原创不易，点个赞叭