使用js实现tab页签切换效果

最新推荐文章于 2024-05-16 12:04:08 发布
最新推荐文章于 2024-05-16 12:04:08 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： js 前端
前端 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
js
30 篇文章 0 订阅
订阅专栏

效果图如下

：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <title>New Web Project</title>  
  7.         <style type="text/css">  
  8.             #content {  
  9.                 width: 400px;  
  10.                 height: 200px;  
  11.             }  
  12.               
  13.             #tab_bar {  
  14.                 width: 400px;  
  15.                 height: 20px;  
  16.                 float: left;  
  17.             }  
  18.             #tab_bar ul {  
  19.                 padding: 0px;  
  20.                 margin: 0px;  
  21.                 height: 20px;  
  22.                 text-align: center;  
  23.             }  
  24.               
  25.             #tab_bar li {  
  26.                 list-style-type: none;  
  27.                 float: left;  
  28.                 width: 133.3px;  
  29.                 height: 20px;  
  30.                 background-color: gray;  
  31.             }  
  32.               
  33.             .tab_css {  
  34.                 width: 400px;  
  35.                 height: 200px;  
  36.                 background-color: orange;  
  37.                 display: none;  
  38.                 float: left;  
  39.             }  
  40.               
  41.         </style>  
  42.         <script type="text/javascript">  
  43.             var myclick = function(v) {  
  44.                 var llis = document.getElementsByTagName("li");  
  45.                 for(var i = 0; i < llis.length; i++) {  
  46.                     var lli = llis[i];  
  47.                     if(lli == document.getElementById("tab" + v)) {  
  48.                         lli.style.backgroundColor = "orange";  
  49.                     } else {  
  50.                         lli.style.backgroundColor = "gray";  
  51.                     }  
  52.                 }  
  53.   
  54.                 var divs = document.getElementsByClassName("tab_css");  
  55.                 for(var i = 0; i < divs.length; i++) {  
  56.   
  57.                     var divv = divs[i];  
  58.   
  59.                     if(divv == document.getElementById("tab" + v + "_content")) {  
  60.                         divv.style.display = "block";  
  61.                     } else {  
  62.                         divv.style.display = "none";  
  63.                     }  
  64.                 }  
  65.   
  66.             }  
  67.         </script>  
  68.     </head>  
  69.     <body>  
  70.         <div id="content">  
  71.             <div id="tab_bar">  
  72.                 <ul>  
  73.                     <li id="tab1" onclick="myclick(1)" style="background-color: orange">  
  74.                         tab1  
  75.                     </li>  
  76.                     <li id="tab2" onclick="myclick(2)">  
  77.                         tab2  
  78.                     </li>  
  79.                     <li id="tab3" onclick="myclick(3)">  
  80.                         tab3  
  81.                     </li>  
  82.                 </ul>  
  83.             </div>  
  84.             <div class="tab_css" id="tab1_content" style="display: block">  
  85.                 <div>页面一</div>  
  86.             </div>  
  87.             <div class="tab_css" id="tab2_content">  
  88.                 <div>页面二</div>  
  89.             </div>  
  90.             <div class="tab_css" id="tab3_content">  
  91.                 <div>页面三</div>  
  92.             </div>  
  93.         </div>  
  94.     </body>  
  95. </html>  
Sky786905664
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简单的一个js的tab页签
09-16
简单的一个js的tab页签,从别处拿过来的。
jquery仿网易图片详情页图片左右切换效果
07-23
文章详情页图片展示带切换，带图片标题插件
js实现的页签
03-07 3604
大家在进行web开发的时候,经常会遇到这样的问题,就是数据量很大,在页面显示,需要多个表单,并且,如果一页显示的话,需要用户滚动才能查看或编辑数据,带来交互和查阅的不友好,大家肯定会想到用tab页签去实现,虽然jsp和.net的高版本已经进行了集成,但是由于操作或者效率上面的原因,始终不能完美的呈现,下面我给大家共享一个js+css实现的页签,希望能给大家带去方便 html代码:
VUE3和antd组件库实现动态展示tab页，并且每个tab页签下动态生成form表单。_vue3 a-tabs(3)
最新发布
2401_84435866的博客
05-16 440
根据后端返回数据使用标签页组件动态生成标签，每个标签展示对应标签的form表单。提交时需要动态校验表单。简要概括一下 HTTP 的特点？HTTP 有哪些缺点？HTTP1.1 如何解决 HTTP 的队头阻塞问题？对于定长和不定长的数据，HTTP 是怎么传输的？浏览器如何拦截响应？HTTP 中如何处理表单数据的提交？如何理解 HTTP 缓存及缓存代理？HTTP 如何处理大文件的传输？HTTP 报文结构是怎样的？如何理解 HTTP 状态码？如何理解 HTTP 代理？HTTP有哪些请求方法？为什么产生代理缓存？
基于jQuery实现tab选项卡【js实现页签切换】
Andone_hsx的博客
12-04 6106
任务描述 本关任务：用jquery实现一个tab切换的功能。 效果图如下： 相关知识 为了完成本关任务，你需要掌握：1.层次选择器，2.方法show和hide， 3.操作css类的方法。 层次选择器 &lt;div class="container"&gt; &lt;p&gt; &lt;span&gt;第一个p标签下的span&lt;/span&gt; &lt;span&gt...
javascript的tab标签
西昆仑
03-13 2812
<br />这个是一篇原理性的文章<br />http://www.javaeye.com/topic/218610<br />使用JavaScript和CSS相结合，可以很容易实现这种效果，其实现原理如下： <br />    （1）将整个tab分成两个部分，第一部分为tab头，也就是上面中蓝色底的部分。第二部分为tab内容，也就是下面显示具体内容的部分。 <br /><br />     （2）在tab头中，可以包括多个选项卡，如新闻是一个选项卡、图片新闻是另一个选项卡。每一个选项卡，事实上就是一个超链
js实现的tab标签切换效果代码分享
11-23
【JavaScript Tab标签切换效果详解】 在网页设计中，Tab切换...这个简单的Tab切换效果适用于网页中的各种交互场景，比如展示不同类别的信息或设置多个配置选项。开发者可以根据实际需求进行自定义样式调整和功能扩展。
js(JavaScript)实现TAB标签切换效果的简单实例
10-26
总结起来，这个JavaScript实现的TAB标签切换效果主要依赖于JavaScript事件处理和DOM操作，结合CSS样式实现了动态的交互效果。对于初学者来说，理解这个实例有助于提升对JavaScript控制页面元素能力的理解，同时也...
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
js实现tab标签切换效果特效代码
03-20
这个简单的代码片段应该能帮助你理解如何使用纯JavaScript实现Tab切换效果。 在实际项目中，为了代码的可维护性和复用性，你可能还需要考虑将这部分逻辑封装成一个组件或函数，以便在多个地方重复使用。同时，可以...
javascript实现不同颜色Tab标签切换效果
10-22
主要为大家详细介绍了javascript实现不同颜色Tab标签切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js代码 播放列表收缩展开 播放列表 左侧二级菜单 兼容主流浏览器
11-09
js代码 播放列表收缩展开 播放列表 左侧二级菜单 兼容主流浏览器
JavaScript面向对象—— 动态创建tab标签页
爱前端的程序媛的博客
05-04 3557
昨天呢，介绍了js中类的概念，以及使用类创建对象的过程。今天就用js中的类实现一个小的功能，动态添加、删除标签页。emmmmm，也有点像tab栏切换，不过比tab栏切换多了添加和删除的功能。 案例说明 js动态实现标签页的创建和删除。这个案例呢，要用类来实现，Tab就是本次案例的类。但在写之前需要来分析并抽象类的特征和行为，也就是对应的类的属性和方法。 这里呢，我把元素的ID作为属性，增删改查的四...
控制 table 的 页签 和空值状态
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
12-01 541
/deep/ .el-table { min-height: 220px max-height: 680px overflow-y: auto } .testPaper .wx-pagination{ position: absolute; bottom: 21px right: 61px } <el-table ref="multipleTable" :data="tableData"
案例：选项卡
Ghlys的博客
01-12 123
案例：选项卡
js 原生手写tabs标签页
05-21 2208
js 原生手写tabs标签页 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ ...
js原生tab标签页（不使用jquery）
iblackboy的博客
06-24 1030
项目需求是使用原生js写出如下样式： 先说下实现的思路， 1、关于tab按钮切换，先默认给三个tab按钮一个共有的样式，然后再单独拿一个class写一个当前选中tab的样式。切换的时候，当前的tab按钮添加这个class，同时去掉另外两个tab按钮的class（不管有没有） 2、关于tab内容的切换，一一对应，设置当前tab页的内容为display:block，其他的两个的内容设置为display：none 代码如下 html： <div class="sellcount_tab"&gt
JavaScript原生态&&jQuery实现tab菜单切换内容（附源码）
m0_73647713的博客
12-26 626
循环遍历所有的 tab 按钮，为每个按钮添加点击事件监听器。当点击某个 tab 按钮时，根据对应的 data-tab 属性值找到相应的 tab 内容，然后显示该内容并隐藏其他内容。我们使用了 jQuery 来监听 tab 按钮的点击事件，当点击某个 tab 按钮时，根据对应的 data-tab 属性值找到相应的 tab 内容，然后显示该内容并隐藏其他内容。方法来获取所有的 tab 按钮和 tab 内容，然后使用。二，jQuery实现。
JS中tab页签切换以及无缝滚动
qq_35146837的博客
05-24 839
1、tab页签切换 <ul id="uls1"> <li>新闻现场</li> <li>最新活动</li> </ul> <div id="box"> <ul id="uls2"> <li>生活成本飞涨，不少英国人将宠物遗弃</li> <li>被弃养宠物数量激增30%</li> <li>一只宠物狗站在一处投票站外</li>
jQuery实现tab标签滑动切换效果
05-25
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码： HTML结构： ```html <div class="tab-wrap"> <ul class="tab-nav"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> </ul> <div class="tab-content"> <div class="tab-pane active">Tab1 Content</div> <div class="tab-pane">Tab2 Content</div> <div class="tab-pane">Tab3 Content</div> <div class="tab-pane">Tab4 Content</div> </div> </div> ``` CSS样式： ```css .tab-wrap { position: relative; } .tab-nav { display: flex; justify-content: space-between; } .tab-nav li { cursor: pointer; padding: 10px; font-size: 16px; font-weight: bold; border: 1px solid #ccc; border-bottom: none; } .tab-nav li.active, .tab-nav li:hover { background-color: #ccc; } .tab-content { position: absolute; top: 40px; left: 0; width: 100%; height: 200px; overflow: hidden; } .tab-pane { display: none; padding: 20px; } .tab-pane.active { display: block; } ``` JavaScript代码： ```javascript $(function() { // 获取tab标签和内容元素 var $tabNav = $(".tab-nav li"); var $tabContent = $(".tab-pane"); // 绑定tab标签点击事件 $tabNav.click(function() { // 获取点击的tab标签索引 var index = $(this).index(); // 切换tab标签的active类 $tabNav.removeClass("active"); $(this).addClass("active"); // 滑动切换tab内容 $tabContent.stop().animate({ "top": -index * $tabContent.height() }, 500); }); }); ``` 这段代码实现了以下功能： - 点击tab标签切换标签的active状态 - 滑动切换tab内容 注意：这只是一个简单的示例，具体实现方式可以根据需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值