首頁猿問網(wǎng)頁定位導航特效原生js沒有效果

網(wǎng)頁定位導航特效原生js沒有效果

JavaScript

QwhateverA 2016-07-23 09:11:16

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>網(wǎng)頁定位導航特效手寫原生js版</title> <meta?name="keywords"?content="關鍵詞"?/> <meta?name="description"?content="關鍵詞描述"?/> <script?src="js/js.js"?type="text/javascript"></script> <link?href="css/css.css"?rel="stylesheet"?type="text/css"?/> <style?type="text/css"> *{ margin:?0; padding:?0; } body{ font-size:?12px; line-height:?1.7; } li{ list-style:?none; } #content{ width:?800px; margin:0?auto; padding:20px; } #content?h1{ color:#0088bb; } #content?.item{ padding:20px; margin-bottom:20px; border:1px?dotted?#0088bb; } #content?.item?h2{ font-size:?16px; font-weight:?bold; border-bottom:?2px?solid?#0088bb; margin-bottom:?10px; } #content?.item?li{ display:?inline; margin-right:10px; } #content?.item?li?a?img{ width:?230px; height:?230px; border:?none; } #menu{ position:?fixed; top:100px; left:?50%; margin-left:?400px; width:?80px; } #menu?ul?li?a{ display:?block; margin:5px?0; font-size:?14px; font-weight:bold; color:#333; width:?80px; height:?50px; line-height:?50px; text-align:?center; text-decoration:?none; } #menu?ul?li?a:hover, #menu?ul?li?a.current{ color:?#fff; background-color:?#0088bb; } /*hack?ie6不支持position:fixed*/ *html,*html?body{ background-image:url(about:blank); background-attachment:?fixed; } *html?#menu{ /*position:?fixed;*/ position:?absolute; top:?expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); } </style> <script?type="text/javascript"> //根據(jù)class?name?獲取元素 function?getByClassName(?obj,cls?){ var?elements?=?obj.getElementsByTagName("*"); var?result?=?[]; for(?var?i=0;?i?<?elements.length;?i++){ if(elements[i].className?==?cls){ result.push(elements[i]); } return?result; } } function?hasClass(?obj,cls?){ return?obj.className.match(new?RegExp("(\\s|^)"?+?cls?+?"(\\s|$)")); } function?removeClass(?obj,cls?){ if(?hasClass(?obj,cls?)){ //remove var?reg?=?new?RegExp("(\\s|^)"?+?cls?+?"(\\s|$)"); obj.className?=?obj.className.replace(reg,""); } } function?addClass(?obj,cls){ if(?!hasClass(?obj,cls)){ obj.className?+=?"?"?+?cls; } } window.onload?=?function(){ window.onscroll?=?function(){ var?top?=?document.documentElement.scrollTop???document.documentElement.scrollTop?:?document.body.scrollTop; //?var?top?=?document.documentElement.scrollTop?||?document.body.scrollTop; //?var?top?=?document.documentElement???document.documentElement.scrollTop?:?document.body.scrollTop; var?menus?=?document.getElementById("menu").getElementsByTagName("a"); var?items?=?getByClassName(document.getElementById("content"),"item"); var?currentId?=?""; for(?var?i=0;?i?<?items.length;?i++){ var?_item?=?items[i]; var?_itemTop?=?_item.offsetTop; if(?top?>?_itemTop?-?200){ currentId?=?_item.id; }else{ break; } } if(currentId){ //給正確的menu下的a元素class賦值 for(?var?j?=?0;?j?<?menus.length;?j++){ var?_menu?=?menus[j]; var?_href?=?_menu.href.split("#");//獲取到的是網(wǎng)址,分割成字符串數(shù)組 if(_href[_href.length?-?1]?!=?currentId){ removeClass(_menu,?"current"); }else{ addClass(_menu,?"current"); } } } }; }; </script> </head> <body> <div?id="menu"> <ul> <li><a?href="#item1"?class="current">1F?男裝</a></li> <li><a?href="#item2">2F?女裝</a></li> <li><a?href="#item3">3F?美妝</a></li> <li><a?href="#item4">4F?數(shù)碼</a></li> <li><a?href="#item5">5F?母嬰</a></li> </ul> </div> <div?id="content"> <h1>地狗購物網(wǎng)</h1> <div?id="item1"?class="item"> <h2>1F?男裝</h2> <ul> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="1F.jpg"?alt=""?/></a></li> </ul> </div> <div?id="item2"?class="item"> <h2>2F?女裝</h2> <ul> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="2F.jpg"?alt=""?/></a></li> </ul> </div> <div?id="item3"?class="item"> <h2>3F?美妝</h2> <ul> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="3F.jpg"?alt=""?/></a></li> </ul> </div> <div?id="item4"?class="item"> <h2>4F?數(shù)碼</h2> <ul> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> <li><a?href="#"><img?src="4F.png"?alt=""?/></a></li> </ul> </div> <div?id="item5"?class="item"> <h2>5F?母嬰</h2> <ul> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> <li><a?href="#"><img?src="5F.jpg"?alt=""?/></a></li> </ul> </div> </div> </body> </html>

查看完整描述

2 回答

已采納

DQJ俊逸

TA貢獻5條經(jīng)驗獲得超4個贊

你是想實現(xiàn)導航欄隨著你點擊或者滾動鼠標時的動態(tài)樣式是吧，你的代碼寫得很好但是有一個地方出問題了就是getByClassName()方法里的return?result; 他不能放在for循環(huán)里面當你第一次進去就返回結(jié)果并且不執(zhí)行后面的循環(huán)了? 所以你得把return?result；這段代碼拿出for循環(huán)

反對回復 2016-07-24