使用jQuery制作简洁的软件产品介绍文字列表和tab标签溢出滚动效果,点击选项卡tab标签对应的文字列表切换效果。适用于多个分类标签和产品功能介绍等选项卡ui布局代码。

方法调用

$(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();
	})
})