jQuery仿腾讯云产品列表tab选项卡切换代码,tab选项多的时候可以左右滚动选择,非常灵活。
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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791