6-4 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

运用javascript知识，实现根据class name获取对象并返回、给页面元素增加class等功能函数，并实现在滚动时根据滚动条的位置自动设置导航菜单的焦点。

温馨提示 : 完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

1.定义getByClassName函数，让函数实现根据class name获取对象并返回

提示：先获取obj中的所有标签，赋值给elements，然后遍历elements，找到className相符的元素存入数组result，最后返回result

 

2.定义addClass函数，让函数实现给对象增加class

提示：首先要判断是否已经有名为cls的class，如果没有，添加即可

 

3.补充代码，给正确的menu下的a元素class赋值current

提示：此处要遍历menus，对menus中的每一个元素判断href属性值和currentId是否相符，并根据判断结果决定是移除名为current的class，还是增加名为current的class。
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>地狗购物网——网页定位导航效果</title>
  6. <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         body {
  13.             font-size: 12px;
  14.             line-height: 1.7;
  15.         }
  16.  
  17.         li {
  18.             list-style: none;
  19.         }
  20.  
  21.         #content {
  22.             width: 800px;
  23.             margin: 0 auto;
  24.             padding: 20px;
  25.         }
  26.  
  27.         #content h1 {
  28.             color: #0088bb;
  29.         }
  30.  
  31.         #content .item {
  32.             padding: 20px;
  33.             margin-bottom: 20px;
  34.             border: 1px dotted #0088bb;
  35.         }
  36.  
  37.         #content .item h2 {
  38.             font-size: 16px;
  39.             font-weight: bold;
  40.             border-bottom: 2px solid #0088bb;
  41.             margin-bottom: 10px;
  42.         }
  43.  
  44.         #content .item li {
  45.             display: inline;
  46.             margin-right: 10px;
  47.         }
  48.  
  49.         #content .item li a img {
  50.             width: 230px;
  51.             height: 230px;
  52.             border: none;
  53.         }
  54.  
  55.         #menu {
  56.             position: fixed;
  57.             top: 100px;
  58.             left: 50%;
  59.             margin-left: 400px;
  60.             width: 80px;
  61.         }
  62.  
  63.         #menu ul li a {
  64.             display: block;
  65.             margin: 5px 0;
  66.             font-size: 14px;
  67.             font-weight: bold;
  68.             color: #333;
  69.             width: 80px;
  70.             height: 50px;
  71.             line-height: 50px;
  72.             text-decoration: none;
  73.             text-align: center;
  74.         }
  75.  
  76.         #menu ul li a:hover,
  77.         #menu ul li a.current {
  78.             color: #fff;
  79.             background: #0088bb;
  80.         }
  81.  
  82.         /*ie6 hack*/
  83.         * html, * html body {
  84.             background-image: url(about:blank);
  85.             background-attachment: fixed;
  86.         }
  87.  
  88.         * html #menu {
  89.             /*position: fixed;*/
  90.             position: absolute;
  91.             top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
  92.         }
  93.  
  94. </style>
  95. <script>
  96.  
  97.   //定义getByClassName函数，让函数实现根据class name获取对象并返回
  98.  
  99.  
  100. 	function hasClass( obj, cls ){ 
  101. 	    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
  102. 	}
  103.  
  104. 	function removeClass( obj, cls ){ 
  105. 	    if( hasClass( obj, cls )){ 
  106. 		    //remove
  107. 			var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
  108. 			obj.className = obj.className.replace(reg, "");
  109. 		}
  110. 	}
  111.  
  112.  
  113.     //定义getByClassName函数，让函数实现给对象增加class 
  114.  
  115.  
  116. 	window.onload = function(){ 
  117.  
  118. 	    window.onscroll = function(){ 		
  119. 		    var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
  120.  
  121. 			var menus = document.getElementById("menu").getElementsByTagName("a");
  122.  
  123. 			var items = getByClassName(document.getElementById("content"), "item");
  124.  
  125. 			var currentId = "";
  126.  
  127. 			for ( var i=0; i< items.length; i++ ){ 
  128. 			    var _item = items[i];
  129. 			    var _itemTop = _item.offsetTop;
  130. 				if( top > _itemTop - 200 ){ 
  131. 				    currentId = _item.id;
  132. 				} else { 
  133. 				    break;
  134. 				}			
  135. 			}
  136.  
  137.  
  138.       //请补充此处代码，给正确的menu下的a元素class赋值current
  139.  
  140.  
  141.  
  142. 		}	
  143. 	}	
  144. </script>
  145. </head>
  146. <body>
  147. <div id="menu">
  148. <ul>
  149. <!--运用锚点，实现导航定位。-->
  150.  
  151.  
  152. <li><a href="#" class="current">1F 男装</a></li>
  153. <li><a href="#">2F 女装</a></li>
  154. <li><a href="#">3F 美妆</a></li>
  155. <li><a href="#">4F 数码</a></li>
  156. <li><a href="#">5F 母婴</a></li>
  157. </ul>
  158. </div>
  159. <div id="content">
  160. <h1>地狗购物网</h1>
  161.  
  162. <div id="item1" class="item">
  163. <h2>1F 男装</h2>
  164. <ul>
  165. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  166. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  167. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  168. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  169. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  170. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  171. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  172. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  173. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  174. </ul>
  175. </div>
  176. <div id="item2" class="item">
  177. <h2>2F 女装</h2>
  178. <ul>
  179. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  180. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  181. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  182. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  183. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  184. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  185. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  186. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  187. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  188. </ul>
  189. </div>
  190. <div id="item3" class="item">
  191. <h2>3F 美妆</h2>
  192. <ul>
  193. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  194. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  195. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  196. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  197. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  198. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  199. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  200. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  201. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  202. </ul>
  203. </div>
  204. <div id="item4" class="item">
  205. <h2>4F 数码</h2>
  206. <ul>
  207. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  208. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  209. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  210. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  211. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  212. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  213. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  214. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  215. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  216. </ul>
  217. </div>
  218. <div id="item5" class="item">
  219. <h2>5F 母婴</h2>
  220. <ul>
  221. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  222. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  223. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  224. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  225. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  226. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  227. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  228. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  229. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  230. </ul>
  231. </div>
  232. </div>
  233. </body>
  234. </html>
下一节