使用jQuery实现tab选项卡切换特效

主要是采用jQuery中的index()方法实现;

首先是要获取到当前标签的索引值,这里的标签用li,也可以用其他的; 

有了这些索引值以后,我们拿着它去下面div(class="tab-item")的集合里找到对应编号的div,每一个标签对应一个div的内容,然后再让对应的div显示出来;  

HTML代码如下:

<div class="tab">
  <ul class="tab-title clearfix">
      <li class="act-title">新闻</li>
      <li>娱乐</li>
      <li>生活</li>
      <li>体育</li>
  </ul>
  <div class="tab-content">
    <div class="tab-item con-show">
        <h2>新闻内容</h2>
        <h2>新闻内容</h2>
        <h2>新闻内容</h2>
    </div>
    <div class="tab-item">
        <h2>娱乐内容</h2>
        <h2>娱乐内容</h2>
        <h2>娱乐内容</h2>
    </div>
    <div class="tab-item">
        <h2>生活内容</h2>
        <h2>生活内容</h2>
        <h2>生活内容</h2>
    </div>
    <div class="tab-item">
        <h2>体育内容</h2>
        <h2>体育内容</h2>
        <h2>体育内容</h2>
    </div>
  </div>
</div>    
   

CSS代码如下:

.tab{
    width: 640px;
    margin-bottom: 10px;
}
.tab-title{
    width: 100%;
    height: auto;
}
.tab-title li{
    float: left;
    width: 100px;
    height: 40px;
    padding: 0 30px;
    text-align: center;
    font: normal 16px/40px "微软雅黑";
    background: #f1f4f5;
    cursor: pointer;
}
.tab-content{
    height: 100px;
    border: 1px solid #ccc;
}
.tab-item{
    display: none;
}
.tab-content .con-show{
    display: block;
}		
.tab-title li.act-title{
	background: #5FB878;
	color: #fff;
}

js代码如下:

$(function(){
				
    $('.tab-title li').on('click',function(){
			
        var index=$(this).index();
        			
        $(this).addClass('act-title').siblings().removeClass('act-title');
        			
        $('.tab-item').eq(index).addClass('con-show').siblings().removeClass('con-show');
			
    });
		
		
		
})

此方法简单易用,适合所有的选项卡标签切换,这里用的是click事件,也可以用hover事件,根据自己的需求选择;