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



170 679 227



特效描述:jQuery 点击tab标签 滑动选项卡切换,jQuery滑动选项卡,点击标签滑动切换效果,固定的单排列表切换代码。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<div class="container">
    <div class="nav">
        <span class="active">盒子1</span>
        <span>盒子2</span>
        <span>盒子3</span>
        <span>盒子4</span>
        <span>盒子5</span>
        <div class="clear"></div>
    </div>
    <div class="content">
        <div class="box">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
            </ul>
            <ul>
                <li>2</li>
                <li>2</li>
                <li>2</li>
                <li>2</li>
                <li>2</li>
                <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
            </ul>
            <ul>
                <li>3</li>
                <li>3</li>
                <li>3</li>
                <li>3</li>
                <li>3</li>
                <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
            </ul>
            <ul>
                <li>4</li>
                <li>4</li>
                <li>4</li>
                <li>4</li>
                <li>4</li>
                <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
            </ul>
            <ul>
                <li>5</li>
                <li>5</li>
                <li>5</li>
                <li>5</li>
                <li>5</li>
                <!--数量自己定义,只要总宽度跟content的宽度一样就好-->
            </ul>
            <!--ul可以只有一个,也就是把li放同一个里面,这里放了很多个是为了分类,比如不同的ul里面放不同的内容-->
        </div>
    </div>
</div>
<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);  //通过操作box的left来使box向左移动, .animate 是动画函数
													//第一个参数用{}包含起来,里面的内容形式为 {'left':100,'top':100},多个用逗号隔开,
													// 表示从当前位置移动到left为100px、top为100px的位置(即left:100px;top:100px处),
													//第二个参数为时间,表示从当前位置移动到第一个参数用时,单位为ms,1000ms=1秒
													//点击的时候一定要点开审查元素,查看box元素的行内样式
	})
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 滚动导航菜单 滚动菜单 滚动导航 右键菜单 滑动导航菜单 滑动导航 滑动菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换 滚动切换 滚动条切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 滑动选项卡 滑动切换 图片切换 图片选项卡 图标选项卡 选项卡自动切换 导航菜单插件 导航插件 菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到