JavaScript程序設(shè)計(jì)基礎(chǔ)教程實(shí)訓(xùn)指導(dǎo)-10-4 實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航_第1頁(yè)
JavaScript程序設(shè)計(jì)基礎(chǔ)教程實(shí)訓(xùn)指導(dǎo)-10-4 實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航_第2頁(yè)
JavaScript程序設(shè)計(jì)基礎(chǔ)教程實(shí)訓(xùn)指導(dǎo)-10-4 實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航_第3頁(yè)
JavaScript程序設(shè)計(jì)基礎(chǔ)教程實(shí)訓(xùn)指導(dǎo)-10-4 實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航_第4頁(yè)
JavaScript程序設(shè)計(jì)基礎(chǔ)教程實(shí)訓(xùn)指導(dǎo)-10-4 實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

實(shí)訓(xùn)案例名稱：制作京東式豎排二級(jí)導(dǎo)航本實(shí)例使用JavaScript制作一個(gè)類似京東的網(wǎng)頁(yè)豎排導(dǎo)航欄。本實(shí)例涉及JavaScript語(yǔ)法如下。1．document.getElementById()方法在window.onload事件的使用中，常常會(huì)看到document.getElementById()方法，該方法常用于獲取元素，其最初被定義為HTMLDOM接口的成員，之后在2級(jí)DOM中移入XMLDOM接口。document.getElementById屬于host對(duì)象，是一個(gè)方法。2．document.getElementsByTagName()方法法，傳回指定名稱的元素集合，其用法與document.getElementById類似。示例代碼如腳本10-4所示。腳本10-4.html<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>JS實(shí)現(xiàn)京東式豎排二級(jí)導(dǎo)航效果</title><scripttype="text/javascript">functionnavShow(){varnav=document.getElementById('nav');varnavs=nav.getElementsByTagName("li");for(vari=0;i<navs.length;i++){navs[i].onmouseover=function(){this.getElementsByTagName('dl')[0].style.display="block";this.style.backgroundColor="#36C1AF";}navs[i].onmouseout=function(){this.getElementsByTagName('dl')[0].style.display="none";this.style.backgroundColor="";}}}window.onload=navShow;</script><style>*{font-family:MicrosoftYaHei;margin:0;padding:0;}body{width:100%;}ul{list-style:none;}a{text-decoration:none;}#header{height:850px;line-height:50px;}#headerh2,#headerh3{font-weight:500;}#headerh2{color:#000000;font-size:18px;width:180px;text-align:center;background:#0D2E49;}#headerh3{color:#000000;font-size:16px;}#nav{width:180px;background:rgba(0,102,173,0.5);z-index:999;}#navli{height:40px;padding-left:40px;line-height:40px;position:relative;}#navh3{height:40px;}#navlidl{position:relative;left:140px;top:-40px;width:150px;background:#fff;display:none;padding:8px10px;}#navdt{width:150px;line-height:30px;height:30px;background:#36C1AF;color:#fff;text-align:center;}#navdda{display:block;height:30px;width:150px;font-size:14px;color:#858585;}#navdda:hover{text-decoration:underline;}#content{height:500px;}#main{background:#cccccc;}</style></head><body><divid="main"><divid="header"><divclass="mycenter"><ulid="nav"><li><h3>賬號(hào)管理</h3><dl><dt>賬號(hào)管理</dt><dd><ahref="#">修改密碼</a><ahref="#">修改用戶名</a><ahref="#">設(shè)置密保問(wèn)題</a></dd></dl></li><li><h3>首頁(yè)管理</h3><dl><dt>首頁(yè)管理</dt><dd><ahref="#">輪轉(zhuǎn)照片設(shè)置</a><ahref="#">產(chǎn)品展示照片設(shè)置</a><ahref="#">底部信息修改</a></dd></dl></li><li><h3>產(chǎn)品管理</h3><dl><dt>產(chǎn)品管理</dt><dd><ahref="#">增加新產(chǎn)品</a><ahref="#">管理全部產(chǎn)品</a><ahref="#">類別管理</a></dd></dl></li><li><h3>新聞管理</h3><dl><dt>新聞管理</dt><dd><ahref="#">發(fā)布新聞</a><ahref="#">全部新聞管理</a><ahref="#">增加系列</a><ahref="#">新聞系列管理</a></dd></dl></li><li><h3>反饋管理</h3><dl><dt>反饋管理</dt><dd><ahref="#">管理所有反饋</a></dd></dl></li><li><h3>權(quán)限管理</h3><dl><dt>權(quán)限管理</dt><dd><ahref="#">添加新管理員</a><ahref="#">查看所有賬號(hào)權(quán)限</a><ahref="#">查看申訴</a></dd></dl></li><li><h3>功能管理</h3><dl><dt>功能管理</dt>

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論