jQuery选项卡标签滑动切换效果

作者 : 小刺猬 本文共774个字,预计阅读时间需要2分钟 发布时间: 2020-08-6 共100人阅读

jQuery选项卡标签滑动切换效果

jQuery点击标签选项卡滑动切换效果,简单实用的tab选项卡点击切换代码。

js代码

<script type="text/javascript">
$(function(){

	var width = 1101; //跟外面盒子的宽度一样,或者写成 var width = $(".content").width();
	var ulNum = $(".content ul").length; //获取ul的个数
	var contentWidth = width * ulNum; //获取整个box应该的长度,刚开始box设置成了1100,但是应该把所有的ul防到一行里面去,这样box向左移动的时候才是无缝滚动

	$(".box").width(contentWidth); //给box设置宽度  .width() 是获取宽度  .width(value)是设置宽度

	$(".nav span").click(function(){

		//$(this)表示点击的这个元素 ,.addClass()表示添加的样式名称,.siblings()表示这个元素的所有兄弟级元素,此处表示span,
		// .removeClass()表示删除的样式名称
		$(this).addClass('active').siblings().removeClass('active');

		var clickNum = $(this).index(); //判断点击的是第几个span .index()方法返回第几个,从0开始算起
		//alert(clickNum);

		var moveLeft = clickNum * width * -1; //应该向左移动的距离

		$(".box").animate({'left':moveLeft}, 600);  
	})

});
</script>
VIP免费 永久VIP免费

已有0人支付


刺猬源码 » jQuery选项卡标签滑动切换效果

刺猬QQ交流群号多少?
363432

发表评论