首页新闻找找看学习计划

怎么用JS实现,点击搜索框上面的(宝贝,天猫,店铺)文字时,改变背景颜色

0
悬赏园豆:10 [已解决问题] 解决于 2015-05-15 14:05

点击导航文字(宝贝,天猫,店铺),能实现搜索框颜色的变化, 但是导航文字 天猫的 背景颜色怎么改变呢

 

点击天猫时,想要达到的是这个效果,文字【天猫】背景颜色也发生改变

 

  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/javascript">
  8             window.onload = function(){
  9                //先获取标签
 10                var as = document.getElementById('search-nav').getElementsByTagName('a');
 11                var panels = document.getElementById('search-text-panel').getElementsByTagName('div');
 12                var btns = document.getElementById('search-btn-panel').getElementsByTagName('div');
 13                for(var i=0;i<as.length;i++){
 14                     as[i].id = i;
 15                       as[i].onclick = function(){
 16                               
 17                              for(var j=0;j<as.length;j++){
 18                                     as[j].className = '';//先把之前的类清空
 19                                     panels[j].style.display = 'none';  
 20                                     btns[j].style.display = 'none';     
 21                              }
                 if(this.id == 1){this.className = 'goods tmall-panel'}
22 else{this.className = 'goods';}//遍历a标签的时候,改变当前类 23 24 panels[this.id].style.display = 'block'; //改变边框颜色 25 btns[this.id].style.display = 'block'; //改变按钮颜色 26 27 } 28 } 29 } 30 </script> 31 <style> 32 body, a { 33 margin: 0; 34 padding: 0; 35 font-size: 12px; 36 } 37 a { 38 text-decoration: none; 39 color: #000; 40 } 41 42 input { 43 outline: none; 44 border: none; 45 } 46 /* 清除浮动 */ 47 .clear { 48 clear: both; 49 } 50 51 .search { 52 margin: 30px auto; 53 width: 760px; 54 height: 100px; 55 56 } 57 .search-main { 58 width: 760px; 59 height: 65px; 60 } 61 .search-nav { 62 height: 25px; 63 width: 720px; 64 } 65 .search-nav a { 66 display: inline-block; 67 width: 50px; 68 height: 25px; 69 text-align: center; 70 line-height: 25px; 71 } 72 73 .search-nav a:hover { 74 background-color: #f9e6e6; 75 } 76 .search-nav .goods { 77 background-color: #ff5400; 78 color: #fff; 79 font-weight: bold; 80 } 81 82 .search-nav .goods:hover { 83 background-color: #ff5400; 84 } 85 86 .search-nav .tmall, .search-nav .shop { 87 margin-left:-6px; 88 } 89 /*点击天猫时,背景颜色改变*/ 90 .search-nav .tmall-panel { 91 background-color: #c60000; 92 }
         .search-nav .tmall-panel:hover {
   background-color: #c60000;
} 93 .search-box { 94 95 width: 714px; 96 height: 34px; 97 float: left; 98 /* overflow: hidden; */ 99 } 100 101 .search-box form { 102 position: relative; 103 width: 714px; 104 height: 34px; 105 106 } 107 .search-text { 108 border: 3px solid #ff5400; 109 height: 34px; 110 width: 608px; 111 } 112 .search-text input{ 113 114 /* float: left; */ 115 padding: 8px 8px 8px 22px; 116 overflow: hidden; 117 width: 578px; 118 } 119 .search-text i { 120 position: absolute; 121 left: 5px; 122 top: 10px; 123 width: 15px; 124 height: 15px; 125 background: url(search.png) no-repeat; 126 background-size: cover; 127 color: transparent; 128 } 129 130 /*点击天猫时搜索框样式*/ 131 .search-tmall-text { 132 border: 3px solid #c60000; 133 } 134 135 .search-btn { 136 position: absolute; 137 right: 0px; 138 top: 0px; 139 width: 100px; 140 height: 40px; 141 background-color: blue; 142 } 143 .search-btn input { 144 background-color: #ff5400; 145 width: 100px; 146 height: 40px; 147 148 font-size: 20px; 149 color: #fff; 150 font-weight: bold; 151 } 152 153 /*点击天猫时搜索按钮样式*/ 154 .search-tmall-btn input{ 155 background-color: #c60000; 156 } 157 158 .search-top { 159 float: right; 160 margin-left: 10px; 161 width: 30px; 162 height: 30px; 163 /* overflow: hidden; */ 164 } 165 166 .search-hot { 167 margin-top: 10px; 168 width: 720px; 169 height: 25px; 170 overflow: hidden; 171 } 172 173 174 </style> 175 </head> 176 <body> 177 <div class="search"> 178 <div class="search-main"> 179 <!-- 搜索导航 --> 180 <div class="search-nav" id="search-nav"> 181 <a class="goods" href="#">宝贝</a> 182 <a class="tmall" href="#" >天猫</a> 183 <a class="shop" href="#">店铺</a> 184 </div> 185 186 <div class="search-box" id="search-box"> 187 <form> 188 <!-- 搜索框 --> 189 <div class="search-text-panel" id="search-text-panel"> 190 <!-- 点击宝贝 --> 191 <div class="search-text" id="search-text" style="display:block"> 192 <input type="text" placeholder="解放双手让懒人更舒服" > 193 <i></i> 194 </div> 195 <!-- 点击天猫 --> 196 <div class="search-text search-tmall-text" id="search-text" style="display:none"> 197 <input type="text" placeholder="定制你的517"> 198 <i></i> 199 </div> 200 <!-- 点击店铺 --> 201 <div class="search-text" id="search-text" style="display:none"> 202 <input type="text" > 203 <i></i> 204 </div> 205 </div> 206 <!-- 搜索按钮 --> 207 <div class="search-btn-panel" id="search-btn-panel"> 208 <div class="search-btn" id="searchBtn" style="display:block"> 209 <input type="submit" value="搜 索"> 210 </div> 211 <div class="search-btn search-tmall-btn" id="searchBtn" style="display:none"> 212 <input type="submit" value="搜 索"> 213 </div> 214 <div class="search-btn" id="searchBtn" style="display:none"> 215 <input type="submit" value="搜 索"> 216 </div> 217 </div> 218 </form> 219 220 </div> 221 222 <div class="search-top"> 223 <a href="#">高级<br>搜索</a> 224 225 </div> 226 </div> 227 <div class="search-hot"> 228 <a href="#">时尚连衣裙</a> 229 <a href="#">鞋子</a> 230 <a href="#">双肩包</a> 231 <a href="#">新款单鞋</a> 232 233 </div> 234 </div> 235 </body> 236 </html>
饭太少吃饭的主页 饭太少吃饭 | 初学一级 | 园豆:191
提问于:2015-05-12 09:26
< >
分享
最佳答案
0

做前端的不是都可以抄的吗?哈哈,大神别生气,初级前端就应该懂得抄,看看淘宝咋做的吧。

收获园豆:5
爱编程的大叔 | 高人七级 |园豆:30089 | 2015-05-12 09:31

看了淘宝的源代码  用kissy写的 暂时看不懂呢

饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-12 09:37

@饭太少吃饭: 那你可以用最传统的三个DIV实现,这不就简单了。

爱编程的大叔 | 园豆:30089 (高人七级) | 2015-05-12 09:42

@爱编程的大叔: 想用JS实现呢,指点下呗

饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-12 09:43

@爱编程的大叔: 用了你说的三个DIV来实现 :)

饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-15 11:00
其他回答(1)
0

你没发现, 你的值i 一直会是3么?

教你一招, F12开发者工具 JS调试,  或者加入alert()看值。。  前端js开发, 要看控制台输出。 

收获园豆:5
问天何必 | 园豆:3291 (老鸟四级) | 2015-05-12 10:06

恩。不知道为什么,alert(i)  然后一直提示i is not defined

支持(0) 反对(0) 饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-12 10:44

@饭太少吃饭: 你三个a标签,写这么复杂搞毛线?

 

不要写循环, 直接在a里面写事件, 

支持(0) 反对(0) 问天何必 | 园豆:3291 (老鸟四级) | 2015-05-12 10:54

@饭太少吃饭: 先写死,再写生,不要想着一步登天。

支持(0) 反对(0) 爱编程的大叔 | 园豆:30089 (高人七级) | 2015-05-12 11:37

@爱编程的大叔: 没想着一步登天,呵呵

支持(0) 反对(0) 饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-12 12:03

@问天何必: 恩,写在了一个函数里,修改了下

支持(0) 反对(0) 饭太少吃饭 | 园豆:191 (初学一级) | 2015-05-12 15:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册