本文实例讲述了Java脚本语言实现的原生态标签标签页功能。分享给大家供大家参考，具体如下：

标签页是一个很常见的东西，在一些框架中也就很常见的，

但未必所有人都知道怎么写，很多人知道怎么在网上复制一份是真的，

这样不好，往往需要用大量的时间去修改网上复制下来的东西，还不如自己写一份快。

一、基本目标

创建一个如下的标签页，在IE8中与谷歌浏览器中的效果如下，几乎没有区别

谷歌浏览器：

IE8:

二、制作过程

1、首先布置好场景，在一个图层内：

图层1~图层四四个超级链接是一个图层，然后各自的图层的内容分别是各自的图层，默认是图层一的内容显示，而图层2~4则默认不显示

html health eta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/headdydiv style=' border :1 px solid # 000000；浮动： left ' wigh t :10%；diva href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick=' div _ tab(this)'图层1/aa href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick=' div _ tab(this)'图层2/aa href=' JavaScript : void(0)' rel=外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' onclick=' div _ tab(this)'图层3/aa 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=' tab div 1 '样式='显示：块； aaaaaaaaaaaaaaaaaaaaaaaa/div id=' tab div 2 ' style=' display : none；bbbbbbbbbbbbb/div div id=' tab div 3 ' style=' display : none；cccccccccccc/div div id=' tab div 4 ' style=' display : none；dddddddddd/div/div style=' clear : both '/div/body/html 2，然后是每一个超级链接都传递自身到爪哇岛描述语言脚本处理，注意的是，如果对超级链接添加爪哇岛描述语言脚本，必须在写上href，并且这个链接指向javascript:void(0)，随后，再加上onclick属性。之后，得到整个超级链接的爪哇岛描述语言根据超级链接的文本进行判断，如果是图层1,则显示图层1,隐藏其它的所有图层，以此类推。注意的是，a是没有价值属性的，所以这里根据其内文本进行判断。

脚本函数div _ tab(obj){ switch(obj。innerhtml){ case '图层1 ' :文件。getelementbyid(' tab div 1 ')。风格。display=' block文件。getelementbyid(' tab div 2 ')。风格。显示='无'；文件。getelementbyid(' tab div 3 ')。风格。显示='无'；文件。getelementbyid(' tab div 4 ')。风格。显示='无'；打破；案例图层2 ' :文件。getelementbyid(' tab div 1 ')。风格。显示='无'；文件。getelementbyid(' tab div 2 ')。风格。display=' block文件。getelementbyid(' tab div 3 ')。风格。显示='无'；文件。getelementbyid(' tab div 4 ')。风格。显示='无'；打破；案例图层3 ' :文件。getelementbyid(' tab div 1 ')。风格。显示='无'；文件。getelementbyid(' tab div 2 ')。风格。显示='无'；文件。getelementbyid(' tab div 3 ')。风格。display=' block文件。getelementbyid(' tab div 4 ')。风格。显示='无'；打破；案例图层4 ' :文件。getelementbyid(' tab div 1 ')。风格。显示='无'；文件。getelementbyid(' tab div 2 ')。风格。显示='无'；文件。getelementbyid(' tab div 3 ')。风格。显示='无'；文件。getelementbyid(' tab div 4 ')。风格。display=' block打破；} }/脚本更多关于Java脚本语言相关内容可查看本站专题： 《JavaScript页面元素操作技巧总结》 、 《javascript面向对象入门教程》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。