本文以js为例，实现了黑色简易推拉门网页的标签效果。分享给大家参考。具体如下：

这是js实现的黑色风格网页推拉门菜单。虽然简单，但看起来很优雅。稍加修改就可以变成选项卡。懂JS的朋友可以好好修改一下，改成自己喜欢的风格。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-simple-black-style-web-tab-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；Charset=utf-8' /title黑色简单选项卡/title style body，ul，Li { margin :0划水：0；}车身{ font :12 px/1.5 Tahoma；} #外部{ width:450pxmargin:10px汽车；} # tab { overflow:hiddenzoom:1背景技术： # 000；border:1px固体# 000；} # tab li { float:leftcolor: # fff高度：30 px；cursor:pointer指针；线高：30 px；列表样式-type : none；padding:0 20px} # tab Li . current { color : # 000；背景# ccc} #内容{ border:1px solid # 000边框-顶部-宽度：0；} # content ul { line-height :25 px；display:nonemargin:0 30pxpadd :10 px 0；}/style script window . onload=function(){ var OLi=document . getelementbyid(' tab ')。getElementsByTagName(' Li ')；var OUl=document . getelementbyid(' content ')。getElementsByTagName(' ul ')；for(var I=0；i oLi.lengthi ) { oLi[i]。索引=I；oLi[i]。onmouseover=function(){ for(var n=0；n oLi.lengthn ) oLi[n]。className=this.className=' currentfor(var n=0；n oUl.lengthn)OUl[n]. style . display=' none '；这个。索引]。风格。display=' block ' } } }/script/headsdydiv id=' outer ' ul id=' tab ' Li class=' current '第1课/li li lelesson 2/li li lelesson 3/Li/ul div id=' content ' ul style=' display 333 Li网页特效原理分析/li li响应用户操作/li li提示框效果/li li事件驱动/li li元素属性操作/li li用手书写第一个JS特效/Li Li介绍功能/Li网页换肤效果/Li Li扩展/缩小/ul ul ul Li更改网页的背景颜色/li li函数引用/li li高重用功能的编写/li li126邮箱选择效果/li li循环和遍历操作/li li简单使用调试器/li li编写典型循环/li li循环匹配if判断/li li使用classname /li li使用innerhtml/Li Li Cannes impression效果/Li Li数组/Li Li字符串连接/li /ul ul liJavaScript编写：ECMAScript、DOM、BOM、 JavaScript兼容性来源/li liJavaScript位置、优缺点/Li liVariable、type、typeof、数据类型转换、变量作用域/Li liclosure:什么是闭包、简单应用、闭包缺点/li li运算符：算术、赋值、关系、逻辑、其他运算符/Li li程序流控制：判断、循环、跳出/Li Li命名规范：命名规范和必要性、匈牙利命名/Li Li函数详细说明：函数组成、调用、事件、传递参数、变量参数、返回值/Li Li mer用法：setInterval、setTimeout