tab标签页切换

    tab标签页切换在网页中应用是十分广泛的，尤其是用在登录面板。这篇文章就简单介绍一下该效果的实现过程。

• 首先贴一下效果图，两个选项卡，点击之后可以进行切换

---

---

• 下面详细介绍实现的过程

1.页面的组织结构：两个选项卡，两块内容。给first-li和first-content添加active类，使页面加载后呈现的效果为第一幅图所示

<!--列表切换的选项卡-->
<div class="tab-header">
    <ul>
        <li class="first-li active"><span>第一个选项</span></li>
        <li class="second-li"><span>第二个选项</span></li>
    </ul>
</div>

<!--切换的内容部分-->
<div class="content">
    <div class="m-box first-content active">
        <p>这是第一个页面</p>
    </div>
    <div class="m-box second-content">
        <p>这是第二个页面</p>
    </div>
</div>

2.css样式，主要通过active类进行选项卡和内容的控制

.tab-header{
    width: 100%;
    margin: 10px auto;
    height: 50px;
    text-align: center;
}

.tab-header ul li{
    list-style-type: none;
    float: left;
    width: 49%;
    line-height: 50px;
    cursor: pointer;
}

.first-li{
    border:1px  solid #e1e1e1;
    background-color: #fff;
}
.second-li{
    border:1px  solid #e1e1e1;
    border-left: none;
    background-color: #fff;
}

.content{
    border: 1px solid #eee;
    width: 90%;
    margin: 40px auto;
    text-align: center;
}

.first-content{
    color: #00c679;
}


/*控制列表选项卡活动状态时的背景颜色*/
.tab-header .active{
    background-color: #efefef;
}

/*控制列表切换内容的显示与隐藏*/
.first-content, .second-content{
    display: none;
}
.first-content.active, .second-content.active {
    display: block;
}

3.利用jQuery给选项卡添加事件，进行标签页切换的控制

<script>
    $(document).ready(function () {
        $(".tab-header li").on("click", function (e) {
            e.preventDefault();
            var i=$(this).index();
            $(".tab-header li").removeClass("active").eq(i).addClass("active"),
            $(".content .m-box").removeClass("active").eq(i).addClass("active")
        });
    });
</script>

解释一下这段代码的功能。
首先给li绑定点击事件。
然后通过 var i=$(this).index();得到当前的索引值，即点击第一个li返回0；点击第二个返回1（index的使用方法）。
通过得到的索引值可以完成接下来的操作：
$(“.tab-header li”).removeClass(“active”).eq(i).addClass(“active”)，将li的active类移除掉，之后又为指定index的li添加active类，content也是一样的原理，从而达到鼠标点击后切换到该标签页的效果（eq的使用方法）

• 好了，就这么几句jQuery代码就完成了标签页切换的功能，下面附上Demo的下载地址：

http://download.youkuaiyun.com/detail/a46262563/9004747