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的使用方法）
http://download.csdn.net/detail/a46262563/9004747