tab标签切换原理总结

时间 2020-03-09

标签 tab 标签切换原理总结繁體版

原文原文链接

首先tab标签的思路就是当鼠标单击时候可以切换窗口内容，也就是说要有两个框，其中一个是头部，一个是与头部关联的框。css

<div>我是标题</div>html

<div>我是内容</div>函数

而其中它的切换时由不少这种组合来完成的，每一个内容里面就能够写不一样的东西。而后再用一个大的盒子把这些包裹起来htm

<div class="zhuti" onLand="tab(n_1)">//这个是整个标签的主体 onland是载入function tab(cab)这个函数的意思io

<div class="menus1" id="tab1" onclick="tab(n_1)">我是标题</div>function

<div class="menus2" id="tab2" onclick="tab(n_2)">我是标题2</div>class

.......原理

<div class="menus100" id="tab100">我是标题100</div>//这个就是说你能够无限的加标签若是须要cli

</div>//这是头部标签的结尾包裹住了头部标签样式

而后在作一个跟头部标签相似的内容标签

<div class="">//这个是包裹整个内容的标签

.......

<div class="nei_2" id="n_100">我是内容100</div>//同上路的意思

</div>//这里包裹住了全部的内容

若是只是想实现tab内容切换的效果只须要写

function tab(cad)

{

n_1.style.display="none"//让id为n_1的标签的css样式display为隐藏

n_2.style.display="none"//让id为n_2的标签的css样式display为隐藏

......

n_100.style.display="none"让id为n_100的标签的css样式display为隐藏

最后这是实现的关键代码

cab.style.display="block"//让单击鼠标所对应的标签出现

}这个代码就能够简单的tab标签实现原理

}

而后是css样式的设定，若是不设定的话，直接预览代码的html样式则是不少混乱的内容标签，当单击一次的时候出现

.nei_2

{

display:none;

}//这是为了把除了nei_1觉得的标签都隐藏，这样初始看到的就只有nei_1.