首页 新闻 搜索 专区 学院

鼠标点击导航,背景颜色没有变化

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>
饭太少吃饭的主页 饭太少吃饭 | 初学一级 | 园豆:191
提问于:2015-05-10 16:10
< >
分享
所有回答(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'就好 

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-12 11:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册