jQuery选项卡切换特效实现步骤
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery选项卡切换特效实现步骤,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4699字,纯文字阅读大概需要7分钟。
内容图文
这次给大家带来jQuery选项卡切换特效实现步骤,jQuery选项卡切换的注意事项有哪些,下面就是实战案例,一起来看一下。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> <p 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> </p> <p 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> </p> <p 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> </p> <p 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> </p> <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> <p 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> </p> <p 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> </p> <p 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> </p> <p 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> </p> <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>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
jQuery实现有幻灯效果tab滑动切换菜单
jQuery实现某门户网站导航页图片拖动排序
jQuery对表格标题排序
以上就是jQuery选项卡切换特效实现步骤的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery选项卡切换特效实现步骤全部内容,希望文章能够帮你解决jQuery选项卡切换特效实现步骤所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。