jquery实现横向tab，滑动tab时内容左右滑动

最新推荐文章于 2025-05-18 10:25:50 发布

原创最新推荐文章于 2025-05-18 10:25:50 发布 · 7.6k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了一个兼容IE8浏览器的横向Tab滑动效果实现方法，使用jQuery进行DOM操作，通过修改CSS样式和JavaScript代码，实现了Tab切换时内容层的平滑滑动。代码包括HTML结构、CSS布局和jQuery动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写一个电商的网站，要兼容ie8。所以用的jquery，很久没用jquery了，写一个效果都很伤脑。

横向tab,滑动tab时内容左右滑动出现

首先是html代码

<div class="container">
  	<div class="tabs-box">
  		<a class="active" href="#">一</a>
  		<a href="#">二</a>
  		<a href="#">三</a>
  	</div>
  	<div class="content-box">
  	   <div class="Jtab_item clearfix">
      		<div style="background:pink" class="content-item">内容一</div>
      		<div style="background:red" class="content-item">内容二</div>
      		<div style="background:yellow" class="content-item">内容三</div>
  	   </div>
  	</div>
  </div>

样式布局

*{
			margin:0;
			padding:0;
		}
		a{
			text-decoration:none;
		}
		.clearfix:before,
		.clearfix:after{
            display:table;
            content:'';
            clear:both;
		}
		.container{
			position:relative;
			margin:200px 0 0 300px;
			width:300px;
			height:440px;
			overflow:hidden;
			border:1px solid #ccc;
			
		}
		.tabs-box{
			width:300px;
			height:40px;
			font-size:0;
		}
        .tabs-box a{
        	display:inline-block;
        	width:100px;
        	height:40px;
        	text-align:center;
        	line-height:40px;
        	font-size:12px;
        }
        .tabs-box a.active{
        	background:#f50030;
        	color:#fff;
        }
        .content-box{
          position:relative;
        	width:300px;
        	height:400px;
        	overflow:hidden;
        }
        .Jtab_item{
          position:absolute;
        	width:900px;
        	height:400px;
        }
        .Jtab_item .content-item{
        	width:300px;
        	height:400px;
        	float:left;
        }

.Jtab_item的定位是重点，所以一定要弄明白为什么：position:absolute

布局定位都写好了，写js就很简单啦，只需要移动Jtab_item层

js代码

 $('.tabs-box a').mouseover(function(){
   var _index=$(this).index();
   $('.tabs-box a').eq(_index).addClass('active').siblings().removeClass('active');
   $('.Jtab_item').animate({
    left:-_index *300
   },300)
  })

。。

样式没调得多好看，只是把大体的效果实现了，细的样式再调整就可以