怎么用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>
最佳答案
0
做前端的不是都可以抄的吗？哈哈，大神别生气，初级前端就应该懂得抄，看看淘宝咋做的吧。
收获园豆：5
看了淘宝的源代码 用kissy写的 暂时看不懂呢
@饭太少吃饭: 那你可以用最传统的三个DIV实现，这不就简单了。
@爱编程的大叔: 想用JS实现呢，指点下呗
@爱编程的大叔: 用了你说的三个DIV来实现 ：）
其他回答(1)
0
你没发现， 你的值i 一直会是3么？
教你一招， F12开发者工具 JS调试， 或者加入alert（）看值。。 前端js开发， 要看控制台输出。
收获园豆：5
恩。不知道为什么，alert（i） 然后一直提示i is not defined
@饭太少吃饭: 你三个a标签，写这么复杂搞毛线？
不要写循环， 直接在a里面写事件，
@饭太少吃饭: 先写死，再写生，不要想着一步登天。
@爱编程的大叔: 没想着一步登天，呵呵
@问天何必: 恩，写在了一个函数里，修改了下
