Tab标签页切换

最新推荐文章于 2023-08-08 09:41:16 发布
最新推荐文章于 2023-08-08 09:41:16 发布
阅读量1k 收藏 1
点赞数
分类专栏： php Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxcboke/article/details/52136814
版权
php 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
Jquery
16 篇文章 0 订阅
订阅专栏

tab.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>tab标签页切换</title>  
  6.     <link rel="stylesheet" href="tab.css" />  
  7.     <script src="jquery-2.1.4.min.js"></script>  <!--注意你此处引入jquery的地址-->  
  8.     <script src="tab.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class='tabtitle'>  
  12.         <ul>  
  13.             <li class='current'>电脑</li>  
  14.             <li>手机</li>  
  15.             <li>电冰箱</li>  
  16.         </ul>  
  17.     </div>  
  18.     <div class='tabcontent'>  
  19.         <div class='hide' style='display:block'>这是电脑</div>  
  20.         <div class='hide'>这是手机</div>  
  21.         <div class='hide'>这是电冰箱</div>  
  22.     </div>  
  23. </body>  
  24. </html>
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>tab标签页切换</title>  
  6.     <link rel="stylesheet" href="tab.css" />  
  7.     <script src="jquery-2.1.4.min.js"></script>  <!--注意你此处引入jquery的地址-->  
  8.     <script src="tab.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class='tabtitle'>  
  12.         <ul>  
  13.             <li class='current'>电脑</li>  
  14.             <li>手机</li>  
  15.             <li>电冰箱</li>  
  16.         </ul>  
  17.     </div>  
  18.     <div class='tabcontent'>  
  19.         <div class='hide' style='display:block'>这是电脑</div>  
  20.         <div class='hide'>这是手机</div>  
  21.         <div class='hide'>这是电冰箱</div>  
  22.     </div>  
  23. </body>  
  24. </html>

tab.css

  1. *{  
  2.     margin: 0px;  
  3. }  
  4. li{  
  5.     list-style-type: none;  
  6. }  
  7. .tabtitle ul li{  
  8.     float: left;  
  9.     border:1px solid red;  
  10.     width: 60px;  
  11.     height: 35px;  
  12.     line-height: 35px;  
  13.     text-align: center;  
  14.     cursor:pointer;  
  15. }  
  16. .tabcontent div{  
  17.     border:1px solid blue;  
  18.     width: 182px;  
  19.     height: 105px;  
  20.     text-align: center;  
  21.     line-height: 105px;  
  22. }  
  23. .tabcontent{  
  24.     clear:both;  
  25.     margin-left: 40px;  
  26. }  
  27. .current{  
  28.     background: red;  
  29.     color: black;  
  30. }  
  31. .hide{  
  32.     display: none;  
  33. } 

tab.js

  1. $(function(){  
  2.      
  3.     //获取所有li  
  4.     var li = $('.tabtitle ul li');  
  5.     //获取所有div  
  6.     var div = $('.tabcontent div');  
  7.     li.mouseover(function(){  
  8.         //获取当前对象  
  9.         var _this = $(this);  
  10.         time = setTimeout(function(){  
  11.             //获取当前对象索引值  
  12.             var num = _this.index();  
  13.             _this.addClass('current').siblings().removeClass('current');  
  14.             div.eq(num).show().siblings().hide();  
  15.         },300);  
  16.   
  17.     }).mouseout(function(){  
  18.         clearTimeout(time);  
  19.     })  
  20.   
  21.   
  22.   
  23. }); 

我就SEI我啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
标签页（Tabs）
lly202406的博客
07-11 448
标签页（Tabs）是一种常见的用户界面元素，广泛应用于网页设计、移动应用和桌面软件中。它们提供了一种简洁有效的方式来组织内容，允许用户在不同的视图或数据集之间轻松切换。本文将探讨标签页的设计原理、使用场景、最佳实践以及如何在现代网页和应用程序中实现它们。
tab页切换（项目全靠你啦）
01-06
tab页切换
tab切换页
weixin_42067731的博客
07-24 407
本页面和前面一篇文章中的切换日期是在一个界面的，本界面是由我在做的一个小项目改编而来的，其中一些class名和id名可能有些突兀，在用的过程中可以自行修改，仅提供一些自己写项目的想法。tab切换页的具体效果如下： 切换页： 具体代码如下： html部分： <div class="main-meeting"> <div class="top-menu"> <div id="hasnodo2" class="menu-title active-title">每日
tab标签页切换
nnaay_的博客
02-13 351
第一种： <div> <ul id="tab-title"> <li class="current">温度报表</li> <li>湿度报表</li> </ul> <div id="tab-cont"> <div style="display:block;">first&l...
Tab页的切换
wanglufei_1992的博客
07-29 352
废话不多少，直接贴代码。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>活动</title> <meta name="viewport" content="initial-scale=1,
tab页切换
liona_koukou的博客
09-27 1403
效果图： 网上找了个图片按着模样实现的，tab按钮背景图片自己画的不大好看_(:зゝ∠)_ 代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &a
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
10-21
标题“最简单纯JavaScript实现Tab标签页切换的方式(推荐)”向我们展示了如何仅使用JavaScript代码来实现Tab切换功能，而不需要依赖任何第三方JavaScript库如jQuery。这种方法的优点在于它的简洁性与易用性，适合初学...
JavaScript实现Tab标签页切换的最简便方式(4种)
10-15
在本文中，我们主要探讨使用JavaScript实现Tab标签页切换的4种简便方法，并通过示例代码进行详细介绍。Tab标签页是一种常见的网页布局方式，允许用户在一个页面内切换查看不同的内容区块，但只展示一个区块的内容。...
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
10-18
总结来说，解决Bootstrap Tab标签页切换时图表显示问题的关键在于监听Tab切换事件，并在事件回调中利用图表库提供的方法（如Highcharts的`reflow`）来调整图表尺寸。通过这种方式，可以确保无论何时切换Tab，图表都...
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
08-29
Vue 2.0 中使用动态组件实现 Tab 标签页切换效果（vue-cli） 本篇文章主要介绍了使用 Vue 2.0 实现 Tab 标签页切换效果的方法，使用动态组件实现 Tab 切换效果。下面是实现的详细过程和关键代码分析。 一、使用...
tab标签图片切换特效
06-10
在网页设计中，"tab标签图片切换特效"是一种常见的交互设计模式，用于优化用户体验，使得大量信息能够以更有序、直观的方式呈现。这种特效通常应用于产品展示、新闻列表或者任何需要分块显示内容的场景。下面我们将...
tab标签页
08-07
tab标签页
tab切换页面
我是我家小女孩
08-02 477
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab-JQ&lt;/title&gt; &lt;style&gt; * { margin:
JavaScript及jQuery实现tab标签页切换
Sibmle
07-03 3025
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jq
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
最新发布
lbcbjtlhmjq的博客
08-08 6432
给下图的静态页面添加tab栏切换效果。
educoder头歌Web实训 web课——综合应用案例：Tab栏切换效果的制作
weixin_51538341的博客
01-08 2698
educoder头歌Web实训 太原理工web课——综合应用案例：动态焦点图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客 第1关：Tab栏CSS样式设计 任务描述 本关任务：设计div容器，实现tab栏css样式设计。 相关知识 为了完成本关任务，你需要掌握：css样式设计 css样式设计 这里举例与我们任务有关的边界样式设计 margin： 上边界值 右边界值 下边界值 左边界值 这个和移动端稍微有点区别，移动端是：上左下右的设置 请注意：下面写法的含义 margin:5px;
背景图片的位置设置应用【图片和背景图的组合使用】
weixin_43837268的博客
09-26 708
<!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>背.
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <li class="active"><a href="#tab1" data-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值