jquery+css实现Tab栏切换的代码实例

最新推荐文章于 2024-03-21 23:56:55 发布
最新推荐文章于 2024-03-21 23:56:55 发布
阅读量532 收藏
点赞数
分类专栏： HTML前端 文章标签： jquery css Tab栏 切换 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44786530/article/details/90374916
版权

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。

最终要实现的效果图如下：

（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发click事件时，对应的内容div的display设置block，否则设置为none。

（2）当鼠标悬停在没有选中的tab栏上时，改变样式，移开时又恢复回来的样式。如果tab栏已选中，则鼠标是否悬停不影响样式。实现方式：为tab栏添加hover事件，当鼠标进入时，判断该tab栏是不是被选中（可以为了选中的tab栏设置一个class，只需要判断是否含有该class即可），在不选中的情况下再添加hover的样式。

完整代码如下（代码下载地址）：

HTML：

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>tab标签</title>
  6. <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div class="tab-contain">
  10. <!-- tab栏 -->
  11. <ul id="tabs">
  12. <li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li>
  13. <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li>
  14. <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li>
  15. <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li>
  16. </ul>
  17. <!-- 对应显示内容 -->
  18. <div id="content">
  19. <div id="tab1" class="item show">
  20. <h2>title 11111</h2>
  21. <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  22. <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  23. </div>
  24. <div id="tab2" class="item">
  25. <h2>title 2222</h2>
  26. <p>text here!!!text here!!!text here!!</p>
  27. <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p>
  28. </div>
  29. <div id="tab3" class="item">
  30. <h2>title 33333</h2>
  31. <p>text here!!!</p>
  32. <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  33. </div>
  34. <div id="tab4" class="item">
  35. <h2>title 44444</h2>
  36. <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  37. <p>text here!!!text </p>
  38. </div>
  39. </div>
  40. </div>
  41.  
  42. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  43. <script type="text/javascript" src="js.js"></script>
  44. </body>
  45. </html>

CSS:

 
  1. .tab-contain{
  2. margin: 50px auto;
  3. width: 1000px;
  4. padding:100px;
  5. background: #7F7D7D;
  6. }
  7. #tabs {
  8. overflow: hidden;
  9. width: 100%;
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. }
  14. #tabs li {
  15. float: left;
  16. margin: 0;
  17. }
  18. li a {
  19. position: relative;
  20. background: #ddd;
  21. padding: 10px 50px;
  22. float: left;
  23. text-decoration: none;
  24. color: #444;
  25. text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  26. border-radius: 20px 20px 0 0;
  27. box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
  28. }
  29.  
  30. .current a{
  31. outline: 0;
  32. background: #fff;
  33. z-index: 4;
  34. }
  35. .hoverItem a{
  36. background: #AAC8B9;
  37. }
  38. #content {
  39. background: #fff;
  40. padding: 50px;
  41. height: 220px;
  42. position: relative;
  43. border-radius: 0 5px 5px 5px;
  44. box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
  45. }
  46. .item{
  47. display: none;
  48. }
  49.  
  50. .show{
  51. display: block;
  52. }

JS:

 
  1. $(function(){
  2. $('#tabs a').click(function(e) {
  3. e.preventDefault();
  4. $('#tabs li').removeClass("current").removeClass("hoverItem");
  5. $(this).parent().addClass("current");
  6. $("#content div").removeClass("show");
  7. $('#' + $(this).attr('title')).addClass('show');
  8. });
  9.  
  10. $('#tabs a').hover(function(){
  11. if(!$(this).parent().hasClass("current")){
  12. $(this).parent().addClass("hoverItem");
  13. }
  14. },function(){
  15. $(this).parent().removeClass("hoverItem");
  16. });
  17. });
1024小神
关注
专栏目录
jquery实现tab栏切换
m0_64739799的博客
03-30 2348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
jQuery实现Tab栏切换
大补bu的博客
05-16 179
HTML <div class="box"> <!-- 清除浮动 --> <ul class="clearfix"> <li class="active">手机</li> <li>美食</li> <li>电脑</li> <li style="border-right:
jQuery——Tab栏切换
NanChen的博客
06-27 5708
简单tab栏切换实现 效果如下： 完整代码：
JS基础案例-tab栏切换（附详细代码）
qq_36507046的博客
07-11 3826
今天做了一个tab栏切换案例，在此将代码以及实现的过程记录下来，希望与小伙伴们一起交流学习。案例整体框架和效果图展示如下：
tab栏切换制作(jquery版本）
qq_45308912的博客
11-20 140
效果展示： 代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px; } #container { /* background-color: red; */ width: 800px; .
jQuery+css实现的tab切换标签(兼容各浏览器)
01-19
本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...tab切换<...
jQuery+CSS3响应式TAB选项卡幻灯片切换代码
06-09
本示例中的"jQuery+CSS3响应式TAB选项卡幻灯片切换代码"正是这种理念的具体应用，旨在创建一个既美观又实用的交互式界面。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax...
原生js+css实现tab切换功能
01-18
本文实例为大家分享了原生css+js实现tab切换功能的具体代码，供大家参考，具体内容如下 现在很多的ui框架都集成了tab功能，使用过程中只需按照他们的api套用即可，但在有时jquery项目中会觉得为了一个tab功能再单独...
用jquery实现Tab切换菜单
webnoob
03-19 1954
1.效果图： 2.html和jq代码： Document tab1 tab2 tab3 内容1 内容2 内容3 $(document).ready(function() { $(".contxt .txt").eq(0).show().siblings().hide()
jQuery 实现tab切换效果
04-19
NULL 博文链接：https://lxzqz.iteye.com/blog/1876715
jQuery+css实现tab切换效果
01-09
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
jquery实现简单Tab切换菜单效果
10-22
主要介绍了jquery实现简单Tab切换菜单效果的相关资料,需要的朋友可以参考下
使用jquery实现div的tab切换实例代码
12-09
使用jquery实现div的tab切换实例代码,比较常用和实用的一种。
JavaScript实现tab栏切换效果
11-21
本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- css样式 --> <style> * { margin: 0; padding: 0; } .box { width: 600px
(JavaScript)JS之Tab栏切换代码详解
最新发布
2301_80460842的博客
03-21 829
注意：有哪种浮动元素，才有相对应的clear操作，例如clear:right对float:left操作无效。(1) float方式：left right both inline-start inline-end。display:inline-block---行内元素，但可修改宽高。display:inline---行内元素，不换行，不可修改宽高。display:block---块级展示，会换行，可修改宽高。——用法：使元素下移，使浮动元素不在文本中出现，而在文本上方。
JS tab栏切换
每天一个前端小知识~
08-28 5015
问题： 当我们点击下面相应的选项时，选项背景颜色和内容会跟随变化 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }
Tab栏切换
qq_61838861的博客
02-06 7916
1.将tab栏分为上下两部分，上面是导航栏，下面是各部分对应的内容。 2.tab栏导航栏部分，点击后样式改变，比如字体颜色、背景颜色改变 ①定义一个类名：current，改变后的样式，先给第一个写该类名，其他的不写类名 ②js获取所有对象，利用for循环遍历给每个对象绑定点击事件,并且设置属性index ③排他算法：利用for循环将所有对象设置类名为空，被点击的对象设置类名current 3.点击不同对象，出现不同的内容 ①定义一个类名：items，其他的都隐藏起来 ②获取全部对象，获取点击对象的索
jQuery实现div tab切换示例及代码
本文档提供了使用jQuery实现动态div标签tab切换的实例代码，这是一种常见的前端交互设计技术。首先，我们来详细解读一下如何通过HTML、CSS和JavaScript结合jQuery来创建一个可切换的tab面板。 HTML部分: 在这个例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值