js实现简洁的滑动门菜单（选项卡)效果代码

本文实例讲述了射流研究…实现简洁的滑动门菜单。分享给大家供大家参考。具体如下：

一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了射流研究…自定义函数：选项卡菜单，函数功能：实现标签菜单，参数说明：tabMenu(tabBox，NavClass)；

参数一：选项卡框（选项卡容器id)参数二：navClass(当前标签样式类)备注：依赖指定超文本标记语言结构。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-scroll-menu-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 '标题简洁的选项卡菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 ' style type=' text/CSS ' ul，li { margin:0划水：0;}.tab box { width :268 pxmargin :20 px } ul。TabTag { height :28 px边框-底部：1px实心# 000;列表式：无} ul。TabTag李{左飘：线高：27 px高度：27 pxpadd :0 18pxcolor : # cccborder :1 px固体# cccborder-底部：无；右边距：5 px背景# fffcursor:pointer指针指针；} ul。李。活动{边框颜色： # 000；背景技术# eeecolor:red位置：相对；top:1px}。tabCon{border:1px固体# 000;边框-top :无；背景# fff}。tCon { display:none背景技术# eeepadding:25px}/style脚本类型=' text/JavaScript '函数tabMenu(tabBox，nav class){ var tabbnavli=document。GetElementByID(TabBox).getElementsByTagName('ul')[0].getElementsByTagName(' Li ')；var tabCon=文档。getelementbyid(tabBox).getElementsByTagName('div')[0].getElementsByTagName(' div ')；var tabLens=tabcon . length for(var I=0；意大利；i ){ //应用射流研究…闭包传入参数我作为当前索引值赋值给m(函数(m){ tabbnavli[m]).onmouseover=function(){ for(var j=0；jtabLensj){ tabbnavli[j].className=(j==m)？nav等级： " "；' tabCon[j].style.display=(j==m)？'块":";} } })(I)；} }//函数调用窗户。onload=function(){ TabMenu(' TabBox 1 '，' active ')；tabMenu('tabBox2 '，' active ')；}/脚本/床头！-demo 1-div id=' TabBox 1 ' class=' TabBox ' ul class=' TabTag ' Li class=' active '新闻1/李莉体育1/李莉财经1/Li/ul div class=' Tabcon ' div class=' Tcon ' style=' display : block '新闻一内容/div div class='tCon '体育一内容/div div class='tCon '财经一内容/div /div/div！-demo 2-div id=' TabBox 2 ' class=' TabBox ' ul class=' TabTag ' Li class=' active '新闻2/李莉体育2/李莉财经2/Li/ul div class=' Tabcon ' div class=' Tcon ' style=' display : block '新闻2内容/div div class='tCon '体育2内容/div div class='tCon '财经2内容/div /div/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。