前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。
最终要实现的效果图如下:
(1)点击tab栏显示对应的内容,并且tab栏样式变化。实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景。这里为了简单,只用css设置样式。然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设置为none。
(2)当鼠标悬停在没有选中的tab栏上时,改变样式,移开时又恢复回来的样式。如果tab栏已选中,则鼠标是否悬停不影响样式。实现方式:为tab栏添加hover事件,当鼠标进入时,判断该tab栏是不是被选中(可以为了选中的tab栏设置一个class,只需要判断是否含有该class即可),在不选中的情况下再添加hover的样式。
完整代码如下(代码下载地址):
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>tab标签</title> <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"> </head> <body> <div class="tab-contain"> <!-- tab栏 --> <ul id="tabs"> <li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li> </ul> <!-- 对应显示内容 --> <div id="content"> <div id="tab1" class="item show"> <h2>title 11111</h2> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab2" class="item"> <h2>title 2222</h2> <p>text here!!!text here!!!text here!!</p> <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p> </div> <div id="tab3" class="item"> <h2>title 33333</h2> <p>text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab4" class="item"> <h2>title 44444</h2> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text </p> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js.js"></script> </body> </html>
CSS:
.tab-contain{ margin: 50px auto; width: 1000px; padding:100px; background: #7F7D7D; } #tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li { float: left; margin: 0; } li a { position: relative; background: #ddd; padding: 10px 50px; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); border-radius: 20px 20px 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, .4); } .current a{ outline: 0; background: #fff; z-index: 4; } .hoverItem a{ background: #AAC8B9; } #content { background: #fff; padding: 50px; height: 220px; position: relative; border-radius: 0 5px 5px 5px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); } .item{ display: none; } .show{ display: block; }
JS:
$(function(){ $('#tabs a').click(function(e) { e.preventDefault(); $('#tabs li').removeClass("current").removeClass("hoverItem"); $(this).parent().addClass("current"); $("#content div").removeClass("show"); $('#' + $(this).attr('title')).addClass('show'); }); $('#tabs a').hover(function(){ if(!$(this).parent().hasClass("current")){ $(this).parent().addClass("hoverItem"); } },function(){ $(this).parent().removeClass("hoverItem"); }); });
以上所述是小编给大家介绍的jquery css实现Tab栏切换详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍用CSS实现tab切换相关面试题,主要包含被问及用CSS实现tab切换时的应答技巧和注意事项,需要的朋友参考一下 1.用label结合单选按钮radio接受切换tab的单击 2.用zindex层级来显示当前tab页对应的内容 3.用css兄弟选择器选中对应的tab页签和内容页,添加相应的样式
本文向大家介绍jQuery简单几行代码实现tab切换,包括了jQuery简单几行代码实现tab切换的使用技巧和注意事项,需要的朋友参考一下 今天突然心血来潮,想到一个很简单的方法即可达到的tab效果 其实逻辑很简单,但看到网上基本上没这样写的 不知道实际应用中是否会有问题呢,请大侠指教 图片演示: 以上就是本文所述的全部内容了,希望大家能够喜欢。
本文向大家介绍jQuery+css实现的切换图片功能代码,包括了jQuery+css实现的切换图片功能代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总
本文向大家介绍jQuery+css实现的tab切换标签(兼容各浏览器),包括了jQuery+css实现的tab切换标签(兼容各浏览器)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQ
本文向大家介绍jQuery实现带幻灯的tab滑动切换风格菜单代码,包括了jQuery实现带幻灯的tab滑动切换风格菜单代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码。分享给大家供大家参考。具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果
本文向大家介绍jquery实现有过渡效果的tab切换,包括了jquery实现有过渡效果的tab切换的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现tab切换的具体代码,供大家参考,具体内容如下 效果: 代码: 如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总、jquery选项卡操作方法汇总 以上就是本文的全部内容,希望对大家的学习有