《jQuery实现TAB选项卡切换特效简洁演示_.docx》由会员分享，可在线阅读，更多相关《jQuery实现TAB选项卡切换特效简洁演示_.docx（15页珍藏版）》请在三一文库上搜索。
1、jQuery实现TAB选项卡切换特效简洁演示_ 本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下 1、tab切换 on !DOCTYPE html html lang=en head meta charset=UTF-8 titlejQuery tab切换/title style type=text/css * margin:0; padding:0; .wrap margin-left: 50px; margin-top: 50px; /*清浮动-clearfix*/ .clearfix *zoom: 1; .clearfix:after content: ;
2、 clear: both; display: block; height: 0; font-size: 0; visibility: hidden; .blist border:1px solid #d9d9d9; width: 275px; height: 32px; .blist li:first-child border-left: none; .blist li list-style: none; width: 68px; height: 32px; border-left:1px solid #d9d9d9; font-size: 14px; font-family: 楷体; lin
3、e-height: 32px; text-align: center; float: left; /*鼠标样式转变为一个手*/ cursor: pointer; /*字体免选中*/ -webkit-user-select: none; .blsit-list width: 275px; .blsit-list li list-style: none; width: 275px; border:1px solid #ccc; height: 200px; border-top: none; .wrap .blist li.active font-weight: bold; color: red;
4、 border-top: 2px solid red; position: relative; top:-1px; height: 31px; .blsit-list li:first-child display: block; .blsit-list li display: none; /style /head body div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /
5、ul /div div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul /div div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul /div di
6、v class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul /div script type=text/javascript src=jquery-1.11.3.min.js/script script type=text/javascript $(function() $(.blist).on(click,li,function() / 设index为当前点击 var index
7、 = $(this).index(); / 点击添加样式利用siblings清除其他兄弟节点样式 $(this).addClass(active).siblings().removeClass(active); / 同理显示与隐蔽 $(this).parents(.wrap).find(.blsit-list li).eq(index).show().siblings().hide(); ) ) /script /body /html 2、tab切换 mouseenter !DOCTYPE html html lang=en head meta charset=UTF-8 titlejQuer
8、y tab切换/title style type=text/css * margin:0; padding:0; .wrap margin-left: 50px; margin-top: 50px; /*清浮动-clearfix*/ .clearfix *zoom: 1; .clearfix:after content: ; clear: both; display: block; height: 0; font-size: 0; visibility: hidden; .blist border:1px solid #d9d9d9; width: 275px; height: 32px; .
9、blist li:first-child border-left: none; .blist li list-style: none; width: 68px; height: 32px; border-left:1px solid #d9d9d9; font-size: 14px; font-family: 楷体; line-height: 32px; text-align: center; float: left; /*鼠标样式转变为一个手*/ cursor: pointer; /*字体免选中*/ -webkit-user-select: none; .blsit-list width:
10、275px; .blsit-list li list-style: none; width: 275px; border:1px solid #ccc; height: 200px; border-top: none; .wrap .blist li.active font-weight: bold; color: red; border-top: 2px solid red; position: relative; top:-1px; height: 31px; .blsit-list li:first-child display: block; .blsit-list li display
11、: none; /style /head body div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul /div div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li
12、liD/li /ul /div div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul /div div class=wrap ul class=blist clearfix li class=active电影/li li电脑/li li冰箱/li li空调/li /ul ul class=blsit-list liA/li liB/li liC/li liD/li /ul
13、 /div script type=text/javascript src=jquery-1.11.3.min.js/script script type=text/javascript $(function() $(.blist li).on(mouseenter,function() var index = $(this).index(); $(this).addClass(active).siblings().removeClass(active); $(this).parents(.wrap).find(.blsit-list li).eq(index).show().siblings().hide(); ) ) /script /body /html 以上就是本文的全部内容，盼望对大家的学习有所关心。 .