本文实例为大家分享jQuery实现拉环选项卡切换特效，供大家参考，具体内容如下

1、标签切换在

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery选项卡切换/title style type=' text/CSS ' * { margin :0；划水：0;} .换行{左边距： 50px边距-top : 50px；} /*清浮动- clearfix*/.清除修复{ * zoom : 1；} .clearfix:after在{内容： }之后；clear:两者；显示器：块；高度： 0;font-size : 0；可见性：隐藏；} .blist { border :1 px solid # d9d 9；宽度： 275像素；高度：32px }。李blist :第一个孩子{左边框：无；} .blist li{ list-style:无；宽度： 68px高度： 32px边框-左侧：1px实心# d9d 9；font-size : 14px字体系列： '楷体；线高： 32px文本对齐：中心；向左浮动：/*鼠标样式改变为一个手*/cursor:指针；/*字体免选中*/-web套件-用户-选择：无；} .bl列表{ width : 275 px} .blsit-list li{ list-style:无；宽度： 275像素；border:1px固体# ccc高度： 200像素；边框-顶部：无；} .包起来李先生。活动{ font-weight : bold；颜色：红色；边框-top: 2px纯红；相对位置：top :-1px；高度：31px }。bl-sit-list Li :第一个孩子{显示： }块；} .bl候补名单李{显示：无；}/style/head body div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul/ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul/ul=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div=' wrap ' ul=' blist clear fix ' 李='主动'电影/li li电脑/li li冰箱/li li空调/Li/ul/ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div脚本类型=' text/JAVAScript ' src=' http : jquery-1。 11 .3 .量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $().blist ').on('click '，' li '，function(){ //设指数为当前点击定义变量索引=$(这个).index()；//点击添加样式利用同科清除其他兄弟节点样式$(这个)。addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；//同理显示与隐藏$(这个)。父母('。换行')。查找('。李的名单.eq(指数)。显示()。兄弟姐妹()。hide()；})}))/脚本/正文/html2、选项卡切换鼠标输入

效果图：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery选项卡切换/title style type=' text/CSS ' * { margin :0；划水：0;} .换行{左边距： 50px边距-top : 50px；} /*清浮动- clearfix*/.清除修复{ * zoom : 1；} .clearfix:after在{内容： }之后；clear:两者；显示器：块；高度： 0;font-size : 0；可见性：隐藏；} .blist { border :1 px solid # d9d 9；宽度： 275像素；高度：32px }。李blist :第一个孩子{左边框：无；} .blist li{ list-style:无；宽度： 68px高度： 32px边框-左侧：1px实心# d9d 9；font-size : 14px字体系列： '楷体；线高： 32px文本对齐：中心；向左浮动：/*鼠标样式改变为一个手*/cursor:指针；/*字体免选中*/-web套件-用户-选择：无；} .bl列表{ width : 275 px} .blsit-list li{ list-style:无；宽度： 275像素；border:1px固体# ccc高度： 200像素；边框-顶部：无；} .包起来李先生。活动{ font-weight : bold；颜色：红色；边框-top: 2px纯红；相对位置：top :-1px；高度：31px }。bl-sit-list Li :第一个孩子{显示： }块；} .bl候补名单李{显示：无；}/style/head body div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul/ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul/ul=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div=' wrap ' ul=' blist clear fix ' 李='主动'电影/li li电脑/li li冰箱/li li空调/Li/ul/ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div class=' wrap ' ul class=' blist clear fix ' Li class=' active '电影/li li电脑/li li冰箱/li li空调/Li/ul ul class=' bl-sit-list ' LiA/Li LiB/Li LiC/Li LiD/Li/ul/div脚本类型=' text/JAVAScript ' src=' http : jquery-1。 11 .3 .量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $().李先生.on('mouseenter '，function(){ var index=$(this).index()；$(这个)。addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$(这个)。父母('。换行')。查找('。李的名单.eq(指数)。显示()。兄弟姐妹()。hide()；})})/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助。