最近经常需要用到tab，所以写了一个简单的。如果以后用，可以直接复制一个，稍微改一下就行了。先看效果图：

让我们来看看如何编写代码：1。sp文件easytab.jsp副本的代码如下：% @ page language=' Java ' import=' Java . util . * ' page coding=' utf-8 ' % % string path=request . getcontextpath()；string base path=request . getscheme()' ://' request . getservername()' : ' request . getserverport()' path '/；% !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head base href=' %=base path % ' title my JSP ' tab . JSP '起始页/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' meta http-equiv=' keyword ' content=' keyword 1，keyword2，诗歌/a/lilia name=' easy tab ' onclick=' tab switch 2(这是，' easytab _ content _ '，1)；'百度/a/lilia name=' easy tab ' onclick=' tabsswitch 2(此为，' easytab _ content _ '，2)；'search/a/Li/ul div id=' easy tab _ content _ 0 ' class=' easy tab _ content ' div style=' color : # 78 bbaf；' font-size :14 px；'著名诗句“采菊东篱下，悠然见南山。”金代诗人陶渊明的《蓝色》；font-size :16 px；' font-weight : bold；'饮酒/div div style=' color : blue；font-size :16 px；' font-weight : bold；'盖房子是在人类的地盘上，但是没有车马。/div div style=' color : blue；font-size :16 px；' font-weight : bold；'问何俊能？心离自己很远。/div div style=' color : blue；font-size :16 px；' font-weight : bold；'在菊花篱笆下，你可以悠闲地看南山。/div div style=' color : blue；font-size :16 px；' font-weight : bold；'山一天比一天好，鸟也和谐了。/div div style=' color : blue；font-size :16 px；' font-weight : bold；'这里面有真正的意义，想分辨的时候已经忘词了。/div div style=' color : # 00 aaff；' font-size :15 px；'作品赏析：“采菊东篱下，悠然见南山”，这是千百年来广为人知的一句话。因为有了“心远在侧”的精神境界，我们可以悠闲地在树篱下采菊，仰望群山，那是多么惬意和不平凡啊！这两句用客观景物的描写映衬出诗人的闲适心情，“闲适”二字用得好，说明诗人无意寻觅，却不期而遇。苏东坡赞了这两句：“采菊时，正巧看到山，但不是一开始的意思，而是环境和意志，所以令人欣慰。“见”字也用得妙极了，“见”是偶然的相遇。南山之美正好与采菊时的悠然心情相映成趣，合成了我已经忘记的“无我”。如果你用“王”这个词，在你有意去看之前，你的心里会有南山，你会变成一片“自我之地”，从而失去一种忘记机会的天真兴趣。南山之美是什么让诗人如此推崇？然后就是“山越来越好，鸟与鸟和谐”，这也是诗人偶然看到的风景。在南山美丽的晚景中，鸟儿们一起飞回大山，一切都是自由自在，适应力强。正如诗人摆脱了官场的束缚，无忧无虑，诗人在这里体会到了自然和人生的真谛。”这里面有真意，想分辨的时候已经忘词了。“诗人从自然之鸟、南山、夕阳、秋菊中体会到了什么？万物运转，各得其所，这是自然规律吗？是对古代朴素自足的理想社会的向往吗？这是一种留给自然的生活哲学吗？是率真的性格吗？诗人没有明确地表达出来，而是含蓄地提出问题让读者思考，而他“想把自己和他的文字区分开来”。

如果结合前面"结庐在人境，而无车马喧"来理解，"真意"我们可以理解为人生的真正意义，那就是人生不应该汲汲于名利，不应该被官场的龌龊玷污了自己自然的天性，而应该回到自然中去，去欣赏大自然的无限清新和生机勃勃！当然，这个"真意"的内涵很大，作者没有全部说出来，也无须说出来，这两句哲理性的小结给读者以言已尽而意无穷的想象余地，令人回味无穷/div/div id=' easy tab _ content _ 1 ' class=' easy tab _ content ' iframe width=' 100% ' height=' 100% '框架边框=' 0 '滚动='auto ' src=' http :http://www。百度。com '/iframe/div id=' easy tab _ content _ 2 ' class=' easy tab _ content ' iframe width=' 100% ' height=' 100% '框架边框=' 0 '滚动='自动'单击();//页面加载完成后，点击第一个标签/脚本/正文/html二、样式文件grey.css复制代码代码如下：车身{底色： # CCCmargin:40px}。easy tab _ area { border :1 px solid # 494 e52；背景色： # 636 d76padding:8px } ul。easy tab { margin 336016 px 0；padd :0 00 1px } ul。李{列表式：无；display : inline } ul . easy tab阿利{底色： # 464 c54color : # ffebb 5 padding :16 px 14px文本装饰：无；font-size :14 pxfont-family:Verdana，Arial，Helvetica无衬线；字体粗细：加粗；border:1px固体# 464 c 54} ul。easy tab阿利：悬停{底色： # 2f 343 a；边框-颜色： # 2f 343 a；} ul。easy tab阿利. easy tab _ active {底色： # ffffff颜色： # 282 e 32border:1px固体# 464 c 54边框-底部： 2px实心# ffffff}。easy tab _ content {底色： # ffffffpadding:10px高度：400 px} 三、js文件easytab.js复制代码代码如下： /** * * @param _this所点击的标签标签* @ param content _前缀选项卡标签所对应差异的编号前缀。注：这里要求所有的前缀必须一样* @param激活所要激活差异的编号最后的数字。注：这里要求数字必须从零开始，依次增1.*/function tab ssswitch 2(_ this，content_prefix，active){ var tab=document。getelementsbyname(_ this。姓名)；var number=tab . length for(var I=0；一号；I){ var tab=tab[I]；tab.className=文档。getelementbyid(content _ prefix I)。风格。显示='无'；} _这个。类名=' easy tab _ active文件。getelementbyid(content _ prefix处于活动状态)。风格。display=' block} 就是以上这些了。最后总结一下：一、样式还可以优化，比如加一些背景图片。二、这里的标签标签是一次加载所有标签页，然后，点击哪个标签页就显示哪个，其它的隐藏。其实可以把标签页的内容都设置为iframe，然后动态给其设置科学研究委员会的值，就可以达到点哪个就刷新哪个内容了。