JS在同一个网页布局中实现了一个推拉门和TAB的例子

本文讲述了一个JS在同一个网页布局中实现推拉门和TAB的例子。分享给大家参考。具体如下：

在这里，我们演示了推拉门和TAB在同一网页布局中的效果。其实推拉门和拉环没有太大区别，只有鼠标动作的区别。但是，有时候在同一个网页中布局两个以上的标签页，很容易造成混乱，导致JS错误。如果你需要这样做，请参考这个例子来帮助你解决这个问题。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题修正版的网页标签滑动门/title style * { margin 33600；划水：0;}正文{ margin :50 pxfont-size :12 px；color : # 666 } Li { list-style : none；}.列表{宽度：378像素高度：100 pxpadd :10 px font-size :14 px；线高：24 pxborder:1px # cfedff固体；边框-top :0；}.选项卡{ width :398 pxh warth :34 pxborder :1 px # cfe df固体；边框-底部：0;背景： URL(图片/标题。gif)重复-x；}.制表符ul {边距：0划水：0;}.tab Li { float : leftadding :0 30 pxh three :34 px线高：34 px文本对齐：居中；右边框：1px #ebf7ff实心；光标：指针指针；}.tab李。现在{ color : # 5299 C4；背景# fffont-weight : bold；}.block { display:block}/style脚本类型=' text/JavaScript '函数setTab(name，num，n){ for(I=1；I=n；I){ var menu=document。getelementbyid(名称(一)；var con=文档。getelementbyid(name ' _ ' con ' I)；menu.className=i==num？现在是":";con.style.display=i==num？block ' : ' none } }/script/head dy1h选项卡切换on mouse/h1 div class=' tab ' ul Li id=' one 1 ' on mouseover=' setTab '(one，1，4)' class='now '儒家/Li Li id=' one 2 ' on mouse over=' SetTab '(one，2，4)法家/Li Li id=' one 3 ' on mouse over=' SetTab '(one，3，4)墨家/Li Li id=' one 4 ' on mouse over=' SetTab '(one，4，4)道家/Li/ul/div class=' list ' div id=' one _ con 1 ' div style=' background : # 333；跨度儒家，代表人物为孔丘、孟轲，代表作《春秋》 、 《论语》 、 《孟子》 。/span/div/div div id=' one _ con 2 ' style=' display : none；div style=' background: # ff0跨度法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》 、 《管子》 。/span/div/div div id=' one _ con 3 ' style=' display : none；div style=' background: # f00跨度墨家，代表人物墨翟，代表作《墨子》 。/span/div/div div id=' one _ con 4 ' style=' display : none；div style=' background: # e45跨度道家，代表人物李耳、庄周，代表作《老子》 、 《庄子》 。/span/div/div/br/br/h1 TAb切换onClick/h1 div class=' tab ' ul Li id=' two 1 ' onClick=' setTab '(two，1，4)' class='now '儒家/Li Li id=' two 2 ' onclick=' SetTab '(two，2，4)法家/Li Li id=' two 3 ' onclick=' SetTab '(two，3，4)墨家/Li Li id=' two 4 ' onclick=' SetTab '(two，4，4)道家/Li/ul/div class=' list ' div id=' two _ con 1 ' div style=' background : # 333；跨度儒家，代表人物为孔丘、孟轲，代表作《春秋》 、 《论语》 、 《孟子》 。/span/div/div div id=' two _ con 2 ' style=' display : none；div style=' background: # ff0跨度法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》 、 《管子》 。/span/div/div div id=' two _ con 3 ' style=' display : none；div style=' background: # f00跨度墨家，代表人物墨翟，代表作《墨子》 。/span/div/div div id=' two _ con 4 ' style=' display : none；div style=' background: # e45跨度道家，代表人物李耳、庄周，代表作《老子》 、 《庄子》 。/span/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。