鼠标点击导航，背景颜色没有变化
0
悬赏园豆：5
[已关闭问题]
关闭于 2015-05-10 18:02
鼠标点击改变导航条（宝贝，天猫，店铺）背景色 浏览器中查看 没反应 ，没找到问题在哪里？
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <!-- <meta charset="UTF-8"> --> 5 <meta name="description" content="小清新 文艺青年的聚集地"> 6 <title>淘宝</title> 7 <script type="text/javascipt"> 8 //先获取标签 9 var as = document.getElementById('search-nav').getElementsByTagName('a'); 10 for(var i=0;i<as.length;i++){ 11 12 as[i].onclick = function(){ 13 for(var i=0;i<as.length;i++){ 14 as[i].className = ''; 15 } 16 as[i].className = 'goods'; 17 18 } 19 } 20 21 </script> 22 <style> 23 body, a { 24 margin: 0; 25 padding: 0; 26 font-size: 12px; 27 } 28 a { 29 text-decoration: none; 30 color: #000; 31 } 32 33 input { 34 outline: none; 35 border: none; 36 } 37 /* 清除浮动 */ 38 .clear { 39 clear: both; 40 } 41 42 .search { 43 margin: 30px auto; 44 width: 760px; 45 height: 100px; 46 47 } 48 .search-main { 49 width: 760px; 50 height: 65px; 51 } 52 .search-nav { 53 height: 25px; 54 width: 720px; 55 } 56 .search-nav a { 57 display: inline-block; 58 width: 50px; 59 height: 25px; 60 text-align: center; 61 line-height: 25px; 62 } 63 64 /*.search-nav a:hover { 65 background-color: #f9e6e6; 66 }*/ 67 .search-nav .goods { 68 background-color: #ff5400; 69 color: #fff; 70 font-weight: bold; 71 } 72 73 /*.search-nav .goods:hover { 74 background-color: #ff5400; 75 }*/ 76 77 .search-nav a { 78 margin-left:-6px; 79 } 80 .search-box { 81 border: 3px solid #ff5400; 82 width: 714px; 83 height: 34px; 84 float: left; 85 /* overflow: hidden; */ 86 } 87 88 .search-box form { 89 position: relative; 90 width: 714px; 91 height: 34px; 92 93 } 94 .search-text { 95 height: 34px; 96 width: 584px; 97 } 98 .search-text input{ 99 100 /* float: left; */ 101 padding: 8px 8px 8px 22px; 102 overflow: hidden; 103 width: 584px; 104 } 105 .search-text i { 106 position: absolute; 107 left: 5px; 108 top: 10px; 109 width: 15px; 110 height: 15px; 111 background: url(search.png) no-repeat; 112 background-size: cover; 113 color: transparent; 114 } 115 .search-btn { 116 position: absolute; 117 right: 0px; 118 top: 0px; 119 width: 100px; 120 height: 34px; 121 } 122 .search-btn input { 123 124 width: 100px; 125 height: 34px; 126 background-color: #ff5400; 127 font-size: 20px; 128 color: #fff; 129 font-weight: bold; 130 } 131 132 .search-top { 133 float: right; 134 margin-left: 10px; 135 width: 30px; 136 height: 30px; 137 /* overflow: hidden; */ 138 } 139 140 .search-hot { 141 margin-top: 10px; 142 width: 720px; 143 height: 25px; 144 overflow: hidden; 145 } 146 147 148 </style> 149 </head> 150 <body> 151 <div class="search"> 152 <div class="search-main"> 153 <div class="search-nav" id="search-nav"> 154 <a class="goods" href="#">宝贝</a> 155 <a href="#">天猫</a> 156 <a href="#">店铺</a> 157 </div> 158 <div class="search-box"> 159 <form> 160 <div class="search-text"> 161 <input type="text" placeholder="解放双手让懒人更舒服"> 162 <i></i> 163 </div> 164 <div class="search-btn"> 165 <input type="submit" value="搜 索"> 166 </div> 167 </form> 168 169 </div> 170 171 <div class="search-top"> 172 <a href="#">高级<br>搜索</a> 173 174 </div> 175 </div> 176 <div class="search-hot"> 177 <a href="#">时尚连衣裙</a> 178 <a href="#">鞋子</a> 179 <a href="#">双肩包</a> 180 <a href="#">新款单鞋</a> 181 182 </div> 183 </div> 184 </body> 185 </html>
所有回答(1)
0
代码里有俩个错误：
一个只得拼写错误，7 <script type="text/javascipt"> 应该是<script type="text/javascript">或者你直接写<script>就好
第二个是当你点击的时候是给你指定的那个添加一个class， alert（i）你就能知道i=3 不会改变 所以所以用this ； as[i].className = 'goods';换成this.className = 'goods'就好
