jQuery实现TAB选项卡切换特效简单演示
2016-03-04 00:00
996 查看
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下
1、tab切换 on
2、tab切换 mouseenter
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助。
jquery-easyui关闭tab自动切换到前一个tab
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
jQuery版Tab标签切换
jquery图片上下tab切换效果
使用jquery实现div的tab切换实例代码
jquery自动切换tabs选项卡的具体实现
jQuery简单tab切换效果实现方法
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
jquery移动端TAB触屏切换实现效果
1、tab切换 on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 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; } .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: 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: 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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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 = $(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"> <title>jQuery 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; } .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: 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: 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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</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"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </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>
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
基于jquery的tab切换 js原理jquery-easyui关闭tab自动切换到前一个tab
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
jQuery版Tab标签切换
jquery图片上下tab切换效果
使用jquery实现div的tab切换实例代码
jquery自动切换tabs选项卡的具体实现
jQuery简单tab切换效果实现方法
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
jquery移动端TAB触屏切换实现效果
相关文章推荐
- jquery实现右侧栏菜单选择操作
- 简单的jQuery banner图片轮播实例代码
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- day04 jQuery
- js和jquery的DOM事件大全
- jQuery修改操作css属性实现方法
- jquery的ajax同步和异步
- 用JQuery写出登录弹出框
- jQuery学习笔记02
- jquery获取表单元素select option的值,对select option操作
- jquery easyui toolbar 分割线问题
- JQUERY、AJAX双击DIV,直接修改DIV内的内容
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jquery四种请求方式
- 不同版本下的toggle
- jquery学习笔记之动态添加元素绑定事件
- Jquery的使用
- jquery插入元素
- ztree的给树赋值及重置树的实现