tab标签切换原理总结

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

<div>我是标题</div>

<div>我是内容</div>

而其中它的切换时由很多这种组合来完成的，每个内容里面就可以写不同的东西。然后再用一个大的盒子把这些包裹起来

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

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

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

.......

<div class="menus100" id="tab100">我是标题100</div>//这个就是说你可以无限的加标签如果需要

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

然后在做一个跟头部标签类似的内容标签

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

<div class="nei_1" id="n_1">我是内容1</div>

<div class="nei_2" id="n_2">我是内容2</div>

.......

<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.

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/1470765/blog/209161