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

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

js代码
<scripttype="text/javascript">
$(function(){varwidth=1101;//跟外面盒子的宽度一样，或者写成varwidth=$(".content").width();
varulNum=$(".contentul").length;//获取ul的个数
varcontentWidth=width*ulNum;//获取整个box应该的长度，刚开始box设置成了1100，但是应该把所有的ul防到一行里面去，这样box向左移动的时候才是无缝滚动$(".box").width(contentWidth);//给box设置宽度.width()是获取宽度.width(value)是设置宽度$(".navspan").click(function(){//$(this)表示点击的这个元素，.addClass()表示添加的样式名称，.siblings()表示这个元素的所有兄弟级元素，此处表示span，
//.removeClass()表示删除的样式名称
$(this).addClass('active').siblings().removeClass('active');varclickNum=$(this).index();//判断点击的是第几个span.index()方法返回第几个，从0开始算起
//alert(clickNum);varmoveLeft=clickNum*width*-1;//应该向左移动的距离$(".box").animate({'left':moveLeft},600);
})});
</script>


下载

2023-11-22 22:17 上传

点击文件名下载附件