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.csdn.net/detail/a46262563/9004747