一个TAB页的简单JS实现

最新推荐文章于 2022-05-23 22:05:22 发布
最新推荐文章于 2022-05-23 22:05:22 发布
阅读量139 收藏
点赞数
分类专栏： html/css/js 文章标签： JavaScript CSS HTML ViewUI
请看下面的代码吧，比较简单。
 
  1. <html>  
  2. <head>  
  3.     <title>一个TAB页的简单JS实现</title>  
  4.     <style type="text/css">  
  5.     #div0{  
  6.         width:300px;  
  7.         margin:0 auto;  
  8.     }  
  9.     #div1{  
  10.         border:1px solid blue;  
  11.         border-bottom:0px solid blue;  
  12.         float:left;  
  13.     }  
  14.     #div2{  
  15.         border-right:1px solid blue;  
  16.         border-top:1px solid blue;  
  17.         float:left;  
  18.     }  
  19.     #div3{  
  20.         border:1px solid blue;  
  21.         clear:left;  
  22.     }  
  23.     #div4{  
  24.         border:1px solid blue;  
  25.         clear:left;  
  26.     }  
  27. </style>  
  28. <script language="javascript">  
  29. window.onload=function(){  
  30. document.getElementById("div1").style.backgroundColor="yellow";  
  31. document.getElementById("div4").style.display="none";  
  32. }  
  33. function foo(){  
  34. document.getElementById("div1").style.backgroundColor="yellow";  
  35. document.getElementById("div2").style.backgroundColor="";  
  36. document.getElementById("div3").style.display="none";  
  37. document.getElementById("div4").style.display="block";  
  38. }  
  39. function bar(){  
  40. document.getElementById("div1").style.backgroundColor="";  
  41. document.getElementById("div2").style.backgroundColor="yellow";  
  42. document.getElementById("div3").style.display="block";  
  43. document.getElementById("div4").style.display="none";  
  44. }  
  45. </script>  
  46. </head>  
  47. <body>  
  48.     <div id="div0">  
  49.         <div id="div1" onmouseover="foo()">Hello</div>  
  50.         <div id="div2" onmouseover="bar()">world</div>  
  51.         <div id="div3">Jason周五能中500万</div>  
  52.         <div id="div4">Jason有个好老婆</div>  
  53.     </div>  
  54. </body>  
  55. </html>  
sunjian1979
关注
专栏目录
JS实现Tab切换，超简单只有几行代码
03-27
JS实现Tab切换，超简单只有几行代码，点击按钮，在同一页面的不同内容切换
js动态生成tab页
07-02
js动态生成tab页,tabpanel,一个动态生成tab的框架界面
最简单的js css Tab 演示
蜗牛天堂
06-18 1237
最简单的js css Tab 演示 function tabChange(obj,id) { var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 var arrayul = document.getElementById(id).getElementsByTagName("u
JS简易tab页
qq_42360843的博客
11-22 229
先上张效果图（我的游记/我的关注/我的回复。3个不同的tab内容） 代码 &lt;div class="navcont clear"&gt; &lt;a class="active" href="javascript:void(0);"&gt;我的游记&lt;/a&gt; &lt;a href="javascript:vo
Tab选项卡（js）
qq_39194067的博客
12-22 2946
实现效果与思路 今天来实现一个常用的功能tab选项卡。下图是基本的样式，当点击不同的选项卡标签时会展示不同的选项卡内容。 实现原理是首先给每个选项卡内容都隐藏，当点击选项卡时使其对应的内容显示就实现了tab选项切换的功能。 具体代码实现 1. 样式实现 <style> button{ //选项卡按钮 ...
基于vue多tab页实现
08-10
在Vue.js框架中，多标签页（Tab）的实现是一个常见的需求，特别是在构建复杂的Web应用时，它能够帮助用户组织和切换不同的视图或功能。本教程将详细讲解如何使用Vue.js来创建一个简单的多标签页系统，并提供了一个...
JavaScript实现tab栏切换效果
10-15
总的来说，这个示例展示了如何使用基础的 HTML、CSS 和 JavaScript 技术实现一个 Tab 切换效果。通过对元素的选择、操作和事件监听，我们可以创建出交互性强、用户体验良好的网页组件。同时，这种实现方式也便于扩展...
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
10-21
标题“最简单纯JavaScript实现Tab标签页切换的方式(推荐)”向我们展示了如何仅使用JavaScript代码来实现Tab切换功能，而不需要依赖任何第三方JavaScript库如jQuery。这种方法的优点在于它的简洁性与易用性，适合初学...
js实现tab切换效果实例
10-23
JavaScript实现Tab切换效果是一种常见的网页交互技术，用户通过点击不同的标签页来查看对应的内容区域，而其他内容区域则会被隐藏。实现这一效果涉及到了HTML、CSS和JavaScript的结合使用。在本例中，我们通过一个...
JS实现的tab切换并显示相应内容模块功能示例
12-10
本文将深入讲解如何使用JavaScript实现一个简单的Tab切换功能，展示相应的内容模块。 首先，我们需要理解基本的实现思路。这个示例中，使用了一层循环遍历所有的Tab导航元素（在本例中是`<li>`元素），并将每个元素...
javascript实现tab页的切换
Serena_tz的博客
09-26 764
至少传入两个参数，第一个是面板标题的父级的ID，第二个是面板的父级的ID，另外两个参数有默认值，可以根据需要传入。需要高亮显示的类名默认用"on"，也可以根据需要传入，具体说明可看注释。 代码如下： /* * tab切换页： * tab("面板标题的父级的ID","面板父级的ID","触发事件的类型","高亮显示的类") * 可以传入2-4四个参数,如果后两个参数没有传入,那么默认触发事件的类型为点击事件，默认的高亮的类请用"on",如果需要自定义高亮的类请传入第四个参数
JS中~ 面向对象编程制作tab栏
qq_64970126的博客
05-23 239
JS中~面向对象编程制作tab栏思路与源码
css，js手写tab切换（pc）
qq_39954539的博客
11-14 799
不论是swiper还是mui的tab切换都存在高度问题。想来想去还是自己写 html &lt;div class="wrapper"&gt; &lt;div class="main"&gt; &lt;h4 id="title"&gt; &lt
通过实现一个 tab 切换功能了解 Redux
杏子
07-27 629
通过实现一个 tab 切换功能彻底了解 Redux前言 前言
实现Tab功能的几种方式
ListenerRi的博客
07-18 919
（废弃）继承自TabActivity + TabHost 布局 + Activity 内容1：TabActivity为ActivityGroup[在版本13里被放弃]子类 2：使用getTabHost() 获得TabHost 对象 3：使用 newTabSpec(…).setContent(Intent) 添加Tab标签与内容（废弃）继承自ActivityGroup + TabHost布局 +
手写实现一个tab、tabs切换页签组件
GaoYuan's Blog
06-08 3403
Tab页签切换是常用组件，经常穿梭于各个业务场景中，这篇文章将代理大家实现一个tabs和tab组件 我们先来看一下最终实现的效果图： 废话不多说，直接上代码， 先来看tabs.vue： <template> <div class="tabs"> <div class="tabs-bar"> <div v-for="(item,index) in navList" :key="item.name" .
html+js实现tab分页进行内容切换
像风走过八千里
01-06 9704
使用tab分页，进行内容切换，可以仅使用html和js来实现 HTML test.html &lt;ul id="tab"&gt; &lt;li class="tabin"&gt;test1&lt;/li&gt; &lt;li&gt;test2&lt;/li&gt; &lt;li&gt;test3&lt;/li&gt; &amp
几种Tab的实现方法
程序员
04-12 3421
转载请注明出处，谢谢！ 学了这久Android，今天来总结一下几种Tab的实现方法 实现方法一： ViewPage来实现 首先创建一个top.xml布局和一个bottom.xml布局，然后在主界面中通过Include属性添加 top.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
JS面向对象创建tab切换栏
weixin_54973904的博客
03-23 336
JS面向对象创建tab切换栏 添加增加、删除、切换、修改的方法 点击加号新增tab栏和内容框，点击叉号删除对应的tab栏，点击选中的tab栏样式变化，双击tab栏、内容框文字可修改内容。 创建inti方法，绑定事件写在inti方法里面。 增加一个新的tab栏会增加相关的元素，新增加的元素没有获取到设置的方法。创建 updatenode方法，init调用updatenode方法，初始化后重新获取元素 保证元素可以及时更新 先获取元素再绑定事件。 constructor(id) { that
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值