前端js——tab选项卡切换模板、例子（点击标签显示对应内容）

效果

1.页面布局

分别设置五个标签，给五个标签写序号，移到标签上获取标签序号显示对应的div
1）设置一个整个的div包含所有的标签和所有内容
2）标签

        <ul><li style="background: blanchedalmond;">快餐</li><li style="background: burlywood;">面食</li><li style="background: cyan;">甜点</li></ul>

3）内容

        <div class="main" style="background: blanchedalmond;"></div><div class="main" style="background: burlywood;"></div><div class="main" style="background: cyan;"></div>

2.页面样式

1）设置整个tab的大小边框

#tab{width: 400px;height: 300px;border: blue 1px solid;margin: 30px auto;}

2）标签浮动\清除标签原点

#tab ul li{float: left;width: 133px;height: 30px;list-style: none;text-align: center;line-height: 30px;}

3）设置内容部分,加绝对定位避免出现三个内容框，设置内容部分隐藏

.main{width: 390px;height: 250px;margin-left: 5px;margin-top: 40px;display: none;position: absolute;}

3.给标签加移入事件，实现tab切换

1）获取id进行定义
2）利用循环给li分别加序号

for(var i=0;i<list.length;i++){ list[i].xuhao=i;}

3）鼠标移入事件：获取li的序号，显示对应序号的div

list[i].onmouseover=function(){var c=this.xuhao;cn[c].style.display="block"}

4)保证tab可以循环使用,每执行一次都先让其他都隐藏在显示对应的

for(var i=0;i<3;i++){cn[i].style.display="none";}

4.源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}#tab{width: 400px;height: 300px;border: blue 1px solid;margin: 30px auto;}/*标签浮动\清除原点*/#tab ul li{float: left;width: 133px;height: 30px;list-style: none;text-align: center;line-height: 30px;}/*设置内容部分,加绝对定位避免出现三个内容框*/.main{width: 390px;height: 250px;margin-left: 5px;margin-top: 40px;display: none;position: absolute;}</style></head><body><div id="tab"><!--标签--><ul><li style="background: blanchedalmond;">快餐</li><li style="background: burlywood;">面食</li><li style="background: cyan;">甜点</li></ul><!--内容--><div class="main" style="background: blanchedalmond;display: block;"></div><div class="main" style="background: burlywood;"></div><div class="main" style="background: cyan;"></div></div><script>var tab=document.getElementById("tab");var list=tab.getElementsByTagName("li");var cn=tab.getElementsByClassName("main");//            加序号for(var i=0;i<list.length;i++){list[i].xuhao=i;
//              鼠标移入事件list[i].onmouseover=function(){
//                  获得当前移入的li序号var c=this.xuhao;for(var i=0;i<3;i++){cn[i].style.display="none";}
//                  对应序号的内容显示cn[c].style.display="block"}}</script></body>
</html>

前端js——tab选项卡切换模板、例子（点击标签显示对应内容）相关推荐

tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是"Java实例解析",文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃 ...
如何用html实现选项卡切换,Css如何实现tab选项卡切换
Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为[#tab1:target,#tab2:target,#tab3:target{z-index:1;} ...
layui获取tab页id_LayUI的Tab选项卡切换显示对应数据
LayUI tab选项卡 + 分页展示实现 Tab选项卡切换显示对应数据要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] ...
Windows 10 修改 Alt+Tab 键切换新版 Microsoft Edge 单个标签页窗口
Windows 10 修改 Alt+Tab 键切换新版 Microsoft Edge 单个标签页/窗口解决方案:在 Windows 设置的搜索框中搜索 alt,选择选择按下 Alt+Tab ...
Windows 10 修改 Alt+Tab 键切换新版 Microsoft Edge 单个标签页/窗口
Windows 10 修改 Alt+Tab 键切换新版 Microsoft Edge 单个标签页/窗口解决方案:在 Windows 设置的搜索框中搜索 alt,选择选择按下 Alt+Tab ...