jQuery仿腾讯云产品列表tab选项卡切换代码

来源:https://www.sucaihuo.com/js/4858.html 2019-10-21 12:06浏览(722) 收藏

jQuery仿腾讯云产品列表tab选项卡切换代码,tab选项多的时候可以左右滚动选择,非常灵活。
jQuery仿腾讯云产品列表tab选项卡切换代码
查看演示 下载资源 下载积分: 20 积分

js代码

<script src="statics/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//选项卡切换
		$('.category ul li').click(function(){
			indexC = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.cont').eq(indexC).addClass('active').siblings().removeClass('active');
		})
		//按钮箭头
		var catew = $('.category').width()-150;
		var cateLiw = 0;
		$('.category ul li').each(function(){
			cateLiw +=$(this).outerWidth();
		})
		var i =0;
		$('.next').click(function(){
			$('.category ul').animate({
				"margin-left":-catew+'px'
			},500)
			i++;
			if((catew+150)*i+(catew+150)>=cateLiw){
				$('.prev').show();
				$('.next').hide();
			}
		})
		$('.prev').click(function(){
			$('.category ul').animate({
				"margin-left":0+'px'
			},500)
			$(this).hide();$('.next').show();
		})
	})
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2