jQuery实现TAB选项卡切换特效简洁演示_

《jQuery实现TAB选项卡切换特效简洁演示_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、jQuery实现TAB选项卡切换特效简洁演示_本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下1、tab切换on!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titlejQuerytab切换/titlestyletype="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:1pxsolid#d9d9d9;width:275px;height:32px;}.blistli:first-child{border-left:none;}.blistli{list-style:none;width:68px;height:32px;border-left:1pxsolid#d9d9d9;font-size:14px;font-family:"楷体";line-height:32p

3、x;text-align:center;float:left;/*鼠标样式转变为一个手*/cursor:pointer;/*字体免选中*/-webkit-user-select:none;}.blsit-list{width:275px;}.blsit-listli{list-style:none;width:275px;border:1pxsolid#ccc;height:200px;border-top:none;}.wrap.blistli.active{font-weight:bold;color:red;border-top:2pxsolidred;po

4、sition:relative;top:-1px;height:31px;}.blsit-listli:first-child{display:block;}.blsit-listli{display:none;}/style/headbodydivclass="wrap"ulclass="blistclearfix"liclass="active"电影/lili电脑/lili冰箱/lili空调/li/ululclass="blsit-list"liA/liliB/liliC/liliD/li/ul/divdivclass="wrap"ulclass="blist

5、clearfix"liclass="active"电影/lili电脑/lili冰箱/lili空调/li/ululclass="blsit-list"liA/liliB/liliC/liliD/li/ul/divdivclass="wrap"ulclass="blistclearfix"liclass="active"电影/lili电脑/lili冰箱/lili空调/li/ululclass="blsit-list"liA/liliB/liliC/liliD/li/ul/divdivclass="wrap"ulclass="blistclearfix"liclass=

6、"active"电影/lili电脑/lili冰箱/lili空调/li/ululclass="blsit-list"liA/liliB/liliC/liliD/li/ul/divscripttype="text/javascript"src="jquery-1.11.3.min.js"/scriptscripttype="text/javascript"$(function(){$(".blist").on("click","li",function(){//设index为当前点击varindex=$(this).index();//点击添加样式利用siblings

7、清除其他兄弟节点样式$(this).addClass("active").siblings().removeClass("active");//同理显示与隐蔽$(this).parents(".wrap").find(".blsit-listli").eq(index).show().siblings().hide();})})/script/body/html2、tab切换mouseenter!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titlejQuerytab切换/titlestyletype="text/

8、css"*