JS实现简单TAB效果

最新推荐文章于 2019-12-22 11:44:15 发布
最新推荐文章于 2019-12-22 11:44:15 发布
阅读量234 收藏
点赞数
分类专栏： WEB表现层技术 文章标签： CSS JavaScript XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imood/article/details/83330154
版权
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> a { color:#000000; text-decoration:none; } #header { float:left; width:100%; background:#D3D3D3; font-size:93%; line-height:normal; } #header ul { margin:0; padding:0px; list-style:none; } #header li { float:left; background:#DCE1EF; border:solid 1px #8EA2C2; margin-left:2px; padding:0px; } #header a { display:block; padding:5px 15px 4px; } #header .current { background:#FFFFFF; border-left:solid 1px #8EA2C2; border-top:solid 1px #8EA2C2; border-right:solid 1px #8EA2C2; border-bottom:solid 0px #8EA2C2; } #header .current a{ padding-bottom:5px; } .content { margin-top:10px; } .content .contentHeader { background-color:#BCC7E0; border:solid 1px #4B66A5; font-weight:bold; } .content .contentMain { border-left:solid 1px #4B66A5; border-top:solid 0px #4B66A5; border-right:solid 1px #4B66A5; border-bottom:solid 1px #4B66A5; } </style> <script type="text/javascript"> function change_option(number,index){ for (var i = 1; i <= number; i++) { document.getElementById('current' + i).className = ''; document.getElementById('content' + i).style.display = 'none'; } document.getElementById('current' + index).className = 'current'; document.getElementById('content' + index).style.display = 'block'; } </script> CSS中的滑动门技术 </head> <body>
</body> </html>
imood
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现tab效果图
Richard_Jason的专栏
11-01 821
图片地址：http://download.csdn.net/detail/richard_jason/9669782 效果图： 示例代码： Tab效果 *{margin:0;padding:0;border:none;text-shadow:1px 0 0 #ddd;} a{text-decoration:none;} img{border:0;
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
一个简单好用的JS TAB选项卡效果
11-24
总共3KB div结构拓展性强 特点：结构简单,兼容性好,可扩展性强,特别适合前端新手, 部分代码演示: <div class="nTab"> <div class="TabTitle"> <ul id="myTab"> <li class="active" onmouseover="nTabs(this,0);">ASP</li> <li class="normal" onmouseover="nTabs(this,1);">PHP2</li> <li class="normal" onmouseover="nTabs(this,2);">PHP3</li> <li class="normal" onmouseover="nTabs(this,3);">PHP4</li> </ul> </div> <div class="TabContent"> <div id="myTab_Content0">同一页面，滑动门，选项卡同在</div> <div id="myTab_Content1" class="none">兼容性好2</div> <div id="myTab_Content2" class="none">兼容性好3</div> <div id="myTab_Content3" class="none">兼容性好4</div> </div> </div>
js实现简单的tab切换
he626shidizai的博客
03-26 500
一些感慨 本人属于小白级别，晚上的代码感觉都比较复杂（对于初学者来说）。 花了很大劲才出现效果，主要是html5不支持一些特性，而网上的教程有的又很老。 还有刚开始写js的时候不知道错误出在哪里一顿瞎找，吐槽js没有编译器。后来才发现浏览器的检查功能在console中会报错，这样就可以开心地找bug了。 要点 点卡切换我理解的就是要将切换的tab封装维div，然后修改display属性来确定显示哪...
JS 实现tab效果、选项卡效果
杜鲁阳的博客
12-26 520
JS 实现tab效果 一、效果描述： 点击标题显示对应内容 效果图： 二、代码： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="wid
css + js tab漂亮的标签效果
02-17
css + js tab漂亮的标签效果 源码 点击就能运行
js实现tab切换效果实例
10-23
JavaScript实现Tab切换效果是一种常见的网页交互技术，用户通过点击不同的标签页来查看对应的内容区域，而其他内容区域则会被隐藏。实现这一效果涉及到了HTML、CSS和JavaScript的结合使用。在本例中，我们通过一个...
JS实现简单的tab切换选项卡效果
10-21
本文介绍了使用JavaScript实现简单的选项卡（tab切换）效果。选项卡是一种常见的交互方式，允许用户在一个区域切换查看不同面板的内容，而其他面板内容则隐藏起来。实现这样的效果需要掌握一些前端开发的基础知识，...
JS简单实现tab切换效果的多窗口显示功能
10-21
本文详细介绍了如何使用JavaScript实现一个简单的tab切换效果，能够在一个网页内展示多个内容窗口，并且能够响应用户的鼠标事件来切换显示不同的内容。以下是文章中涉及的一些关键知识点和操作技巧。 ### 关键知识...
js实现的tab标签切换效果代码分享
11-23
这里我们介绍一个基于纯JavaScript实现的Tab标签切换效果，无需依赖jQuery库，使得网页的加载速度更快，同时也降低了依赖性。 首先，我们来看HTML结构： ```html <!--tag标题--> <li><a href="#" class=...
JS实现Tab切换，超简单只有几行代码
03-27
JS实现Tab切换，超简单只有几行代码，点击按钮，在同一页面的不同内容切换
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
html+css+js实现点击弹出窗口效果
04-23
用html+css+js/jquery实现的点击按钮弹出一个层窗口效果。注释部分使用js实现的，script部分则是jquery实现的，效果更好一些。可以把jquery部分注释掉来看js的效果
使用js实现tab选项卡效果
weixin_44389021的博客
01-09 252
// JS实现选项卡切换 window.onload = function() { var tabList = document.getElementById("tab-list"); var aLis = tabList.getElementsByTagName("li"); var tDiv = document.getEleme...
JS+CSS实现的简洁的TAB选项卡
weixin_30340745的博客
01-19 94
.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS实现的简洁的TAB选项卡丨亿诚丨色彩顾问</title> <script ...
Tab选项卡（js）
qq_39194067的博客
12-22 2900
实现效果与思路 今天来实现一个常用的功能tab选项卡。下图是基本的样式，当点击不同的选项卡标签时会展示不同的选项卡内容。 实现原理是首先给每个选项卡内容都隐藏，当点击选项卡时使其对应的内容显示就实现了tab选项切换的功能。 具体代码实现 1. 样式实现 <style> button{ //选项卡按钮 ...
js实现tab栏切换效果
最新发布
06-12
好的，以下是一个简单的JS实现tab栏切换效果的示例代码： HTML代码： ```html <div class="tab"> <button onclick="openTab('tab1')">Tab 1</button> <button onclick="openTab('tab2')">Tab 2</button> <button onclick="openTab('tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h2>Tab 1 Content</h2> <p>Some content for tab 1 goes here.</p> </div> <div id="tab2" class="tabcontent"> <h2>Tab 2 Content</h2> <p>Some content for tab 2 goes here.</p> </div> <div id="tab3" class="tabcontent"> <h2>Tab 3 Content</h2> <p>Some content for tab 3 goes here.</p> </div> ``` CSS代码： ```css .tabcontent { display: none; } .tabcontent.active { display: block; } ``` JS代码： ```javascript function openTab(tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("active"); } document.getElementById(tabName).classList.add("active"); } ``` 这段代码中，我们在HTML中定义了一个tab栏，包含了多个按钮和对应的内容区域。CSS中定义了初始状态下内容区域是隐藏的，JS中定义了一个函数`openTab`，当点击按钮时调用该函数，将当前选中的内容区域显示出来，同时隐藏其他内容区域。其中，我们使用`classList`来动态添加和删除`active`类，来实现内容区域的显示和隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值