JavaScript程序设计基础教程实训指导-10-4 实训案例名称：制作京东式竖排二级导航

实训案例名称制作京东式竖排二级导航本实例使用制作一个类似京东的网页竖排导航栏本实例涉及语法如下JavaScript JavaScript方法

1.document.getElementByld在事件的使用中，常常会看到方法该方法常用于获取元素，其最初被window.onload document.getElementByld定义为接口的成员，之后在级中移入接口属于对象,HTML DOM2DOM XMLDOM document.getElementByld host是一个方法方法

2.document.getElementsByTagName在事件的使用中，常常使用方法，传回指定名称的元素集合，window.onload document.getElementsByTagName其用法与类似document.getElementByld示例代码如脚本所示10-4脚本10-

4.html!DOCTYPE htmlhtmlheadmetahttp-equiv=Content-Type content=,,text/html;charset=utf-8实现京东式竖排二级导航效果vtitleJS v/titlescript type=,,text/javascript,function navShow{var nav=documentgetElementByldCnav*;var navs=nav.getElementsByTagNameliH;forvar i=O;inavs.length;i++{navs[i].onmouseover=function{this.getElementsByTagNamedr[O].style.display=block;this.style.backgroundColor=,#36C1AF,;navs[i].onmouseout=function{this.getElementsByTagNamedr[O].style.display=none**;this.style.backgroundColor=;window.onload=navShow;/scriptstylefont-family:Microsoft YaHei;margin:0;padding:0;body{width:100%;}ul{list-style:none;}a{text-decoration:none;}#header{height:850px;line-height:50px;#header h2,#header h3{font-weight:500;#header h2{color:#000000;font-size:18px;width:180px;text-align:center;background:#0D2E49;#header h3{color:#000000;font-size:16px;}#nav{width:180px;background:rgba0,102,173,

0.5;z-index:999;#nav li{height:40px;padding-left:40px;line-height:40px;position:relative;#nav h3{height:40px;}#nav lidl{position:relative;left:140px;top:-40px;width:150px;background:#fff;display:none;padding:8px10px;#nav dt{width:150px;line-height:30px;height:30px;background:#36C1AF;color:#fff;text-align:center;#nav dda{display:block;height:30px;width:150px;font-size:14px;color:#858585;#nav dda:hover{text-decoration:underline;#content{height:500px;#main{background:#cccccc;/style/headbodydiv id=MmainMdiv id=headerndiv class=mycenterul id=navHli账号管理vh3v/h3dl账号管理vdt v/dtdd修改密码a href=#v/a仁”#，修改用户名a hrev/a设置密保问题a href=#”v/a/dd/dl/lili首页管理vh3v/h3dl首页管理vdt v/dtdd二#，轮转照片设置a hrefv/a产品展示照片设置a href=#”v/a底部信息修改a href=#”v/a/dd/dl/lili产品管理vh3v/h3dl产品管理vdt v/dtdd增加新产品a href=#”v/a管理全部产品a href=#”v/a类别管理a href=#”v/a/dd/dl/lili新闻管理vh3v/h3dl新闻管理dt v/dtdd发布新闻a href=#”v/a全部新闻管理a href=#”v/a，增加系列a href=#v/a新闻系列管理a href=#”v/a/dd/dl/lili反馈管理vh3v/h3dl反馈管理vdt v/dtdd管理所有反馈a href=#”v/a/dd/dl/lili权限管理vh3v/h3dl权限管理vdt v/dtdd添加新管理员a href=#”v/a，查看所有账号权限a href=#v/a查看申诉a href=#”v/a/dd/dl/lili功能管理vh3v/h3dl功能管理vdt v/dtdd一级功能设置a href=#v/a/dd/dl/li/ul/div/div/div/body/html账号管理网页显示效果如图所示

10.4首页管理修改密码修改用户名产品管理设置密保问题新闻管理反渍管理权限管理功能管理图京东式竖排二级导航效果

10.4。