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

本文介绍了一个兼容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)
  })

。。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值