在北方每当春回大地，丁香花便不甘寂寞，也会兴致匆匆竟相开放，把他那扑扑幽香……丁香花色繁多有紫色，红色，白色等在没有梅雨的六月里散发着香水般芳菲的气息。天坛公园有个丁香林，置身其中，人真会有些要被花香熏晕的感觉多么忧郁的花。多么娇嫩的花。院子里栽满丁香花。开满紫色美丽的鲜花。丁香花小，一簇一簇的，有白有紫，路边的丁香花已孕育花苞，树下围了不少人指着花苞吵吵嚷嚷，别着急呀，只等春雷一响就会竞相绽放。
本文实例讲述了JavaScript实现的原生态Tab标签页功能。分享给大家供大家参考，具体如下：
标签页是一个很常见的东西，在一些框架中也就很常见的，
但未必所有人都知道怎么写，很多人知道怎么在网上复制一份是真的，
这样不好，往往需要用大量的时间去修改网上复制下来的东西，还不如自己写一份快。
一、基本目标
创建一个如下的标签页，在IE8中与谷歌浏览器中的效果如下，几乎没有区别
谷歌浏览器：
IE8：
二、制作过程
1、首先布置好场景，在一个图层内：
图层1~图层4四个超级链接是一个图层，然后各自的图层的内容分别是各自的图层，默认是图层1的内容显示，而图层2~4则默认不显示
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head> <body> <div style="border:1px solid #000000;float:left;wight:10%;"> <div> <a rel="nofollow noopener noreferrer" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层1</a> <a rel="nofollow noopener noreferrer" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层2</a> <a rel="nofollow noopener noreferrer" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层3</a> <a rel="nofollow noopener noreferrer" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层4</a> </div> <div id="tabdiv1" style="display:block;">aaaaaaaaaaaaaaaaaaa</div> <div id="tabdiv2" style="display:none;">bbbbbbbbbbbbbbbbb</div> <div id="tabdiv3" style="display:none;">cccccccccccccccc</div> <div id="tabdiv4" style="display:none;">dddddddddddddd</div> </div> <div style="clear:both"></div> </body> </html>
2、然后是每一个超级链接都传递自身到Javascript脚本处理，注意的是，如果对超级链接添加Javascript脚本，必须在写上href，并且这个链接指向javascript：void(0)，随后，再加上onclick属性。之后，得到整个超级链接的Javascript根据超级链接的文本进行判断，如果是图层1，则显示图层1，隐藏其它的所有图层，以此类推。注意的是，a是没有value属性的，所以这里根据其内文本进行判断。
<script>
function div_tab(obj){
switch(obj.innerHTML){
case "图层1":
document.getElementById("tabdiv1").style.display="block";
document.getElementById("tabdiv2").style.display="none";
document.getElementById("tabdiv3").style.display="none";
document.getElementById("tabdiv4").style.display="none";
break;
case "图层2":
document.getElementById("tabdiv1").style.display="none";
document.getElementById("tabdiv2").style.display="block";
document.getElementById("tabdiv3").style.display="none";
document.getElementById("tabdiv4").style.display="none";
break;
case "图层3":
document.getElementById("tabdiv1").style.display="none";
document.getElementById("tabdiv2").style.display="none";
document.getElementById("tabdiv3").style.display="block";
document.getElementById("tabdiv4").style.display="none";
break;
case "图层4":
document.getElementById("tabdiv1").style.display="none";
document.getElementById("tabdiv2").style.display="none";
document.getElementById("tabdiv3").style.display="none";
document.getElementById("tabdiv4").style.display="block";
break;
}
}
</script>
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是JavaScript实现的原生态Tab标签页功能【兼容IE6】。或许你现在仍不得志，默默的在自己的岗位上奋斗；或许你现在仍不强大，辛苦的功劳被别人抢走也无可奈何。但请别着急，踏实一点，全力以赴的做好那件小事，坚持住，你想要的，岁月最终都会给你。更多关于JavaScript实现的原生态Tab标签页功能【兼容IE6】请关注haodaima.com其它相关文章！
