小米官网jQuery重构

学习了jQuery以后将之前写的小米官网进行了重构，主要是利用jQuery重新书写js代码。

jquery中的隐式迭代、链式编程都在很大程度上简化了我们代码书写的难度和复杂度。

在书写jquery代码时要注意选择器的使用及html结构中的父子兄弟的关系，使用相应的筛选选择器，才能达到相应的效果。

在重构的过程中，明显感觉到jQuery使用性的模块是tab栏切换模块，因为有多个相同的tab栏切换模块，用原生js光实现一个模块的tab栏切换就用到了两层循环，如果想要多个相同tab栏切换模块用一个代码段同时实现还需在加好几层代码，或者就是用不同的类名给每一个模块进行绑定事件。而用jQuery就十分简单，只要理清层级关系，合理使用选择器就能写出想要的效果。

html（结构有点长，因为这个模块占了页面了大部分面积）：

    <div class="goods"><div class="Type_area"><!-- 广告 --><div class="advertising"><img src="img/bannerTop1.jpg"></div><!-- 手机 --><div class="phone"><div class="phone_hd"><i>手机</i><a class="iconfont">查看更多</a></div><div class="phone_l"><img src="img/smartphone_big.png"></div><ul class="phone_r"><li><img src="img/samrtphone_ul1.png"><h3>Xiaomi 12S Ultra</h3><p>这真徕卡｜专业徕卡影像</p><span>5999元起</span></li><li><img src="img/samrtphone_ul2.png"><h3>Xiaomi 12S Pro</h3><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>4699元起</span></li><li><img src="img/samrtphone_ul3.png"><h3>Redmi K50 至尊版</h3><p>骁龙8+ ｜1.5K 高清直屏</p><span>2999元</span></li><li><img src="img/samrtphone_ul4.png"><h3>Xiaomi 12 Pro 天玑版</h3><p>全球首发天玑9000+｜叶脉冷泵散热系统｜2K AMOLED 超视感屏 ｜5000万疾速影像</p><span>8999元起</span></li><li><img src="img/smartphone_ul5.png"><h3>Redmi Note 11 Pro</h3><p>天玑8100｜真旗舰芯</p><span>1599元起</span><i>1799元</i></li><li><img src="img/smartphone_ul6.png"><h3>Redmi Note 11T Pro+</h3><p>天玑8100｜真旗舰芯</p><span>1999元起</span><i>2099元</i></li><li><img src="img/smartphone_ul7.png"><h3>Xiaomi MIX Fold 2</h3><p>超轻薄折叠机身设计，小米自研微水...</p><span>8999元起</span></li><li><img src="img/smartphone_ul8.png"><h3>Xiaomi MIX Fold 2</h3><p>超轻薄折叠机身设计，小米自研微水...</p><span>8999元起</span></li></ul></div><!-- 智能穿戴 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>智能穿戴</i><div><a href="javascript:;" class="hot">热门</a><a href="javascript:;">穿戴</a></div></div><div class="tabSwitch_l"><img src="img/smartwear_big.png"></div><ul class="tabSwitch_r tabSwitch_r_show"><li><img src="img/smartwearul1.png"><h3>Xiaomi Watch S1</h3><p>蓝宝石玻璃镜面 | 不锈钢中框 | 1.43”AMOLED大屏幕</p><span>999元起</span><i>1099元</i></li><li><img src="img/smartwearul2.png"><h3>Xiaomi真无线降噪耳机3</h3><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>299元起</span><i>499元</i></li><li><img src="img/smartwearul3.png"><h3>Redmi 手表 2</h3><p>1.6"AMOLED大屏 | 117种运动模式 | 24小时心率监测</p><span>379元</span><i>399元</i></li><li><img src="img/smartwearul4.png"><h3>小米手环6 NFC版</h3><p>1.56" 跑道全面彩屏 | 30种运动模式 | 24小时心率监测</p><span>229元起</span><i>279元</i></li><li><img src="img/smartwearul5.png"><h3>Xiaomi 正无线降噪耳机 3 Pro</h3><p>40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质</p><span>599元起</span><i>699元</i></li><li><img src="img/smartwearul6.png"><h3>Redmi Buds 3 半入耳真无线蓝牙耳机</h3><p>轻巧半入耳 | 通话降噪 | 20小时长续航</p><span>169元起</span><i>199元</i></li><li><img src="img/smartwearul7.png"><h3>Redmi Buds 3 青春版</h3><p>轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p><span>99元起</span></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/smartwearul2.png"><h3>Xiaomi真无线降噪耳机3</h3><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>299元起</span><i>499元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 笔记本树｜平板 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>笔记本树｜平板</i><div><a href="javascript:;" class="hot">热门</a></div></div><div class="tabSwitch_l"><img src="img/paid_big.png"></div><ul class="tabSwitch_r  tabSwitch_r_show"><li><img src="img/paidul1.png"><h3>Redimi Book Pro 15 2022</h3><p>全新12代英特尔处理器</p><span>5599元起</span></li><li><img src="img/paidul2.png"><h3>Redmi G 2021 R7/RTX3050Ti/16G/51</h3><p>有光追，才是高性能游戏本</p><span>5799元起</span><i>6299元</i></li><li><img src="img/paidul3.png"><h3>Pro 14 增强版 i5 独显 - Win11</h3><p>2.5K超视网膜全面屏</p><span>5599元</span></li><li><img src="img/paidul4.png"><h3>RedmiBook Pro 15 R5/16G/512G 灰</h3><p>3.2K 超清视网膜全面屏 | 微米级一体精雕工艺</p><span>4499元起</span><i>5299元</i></li><li><img src="img/paidul5.png"><h3>Redmi Book Pro 14 2022</h3><p>全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p><span>5399元起</span></li><li><img src="img/paidul6.png"><h3>小米平板5 Pro</h3><p>骁龙870芯片 | 2.5K超高清｜120HZ高刷新率 </p><span>2299元起</span><i>2499元</i></li><li><img src="img/paidul7.png"><h3>Redmi显示器23.8英寸</h3><p>IPS技术硬屏 | 1080P画质 </p><span>599元起</span><i>849元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 家电 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>家电</i><div><a href="javascript:;" class="hot">热门</a><a href="javascript:;">电视影音</a></div></div><div class="tabSwitch_l"><img src="img/hp_big1.png"><img src="img/hp_big2.png"></div><ul class="tabSwitch_r tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>小米电视6 65” OLED</h3><p>OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p><span>6699元起</span><i>6999元</i></li><li><img src="img/hpul10.png"><h3>小米电视6 至尊版 65英寸</h3><p>百级分区背光 | 双120Hz高刷 | 4.5GB+64GB</p><span>7199元起</span><i>7999元</i></li><li><img src="img/hpul11.png"><h3>小米电视 ES55 2022款</h3><p>多分区背光 | MEMC动态补偿 | 杜比视界</p><span>2499元</span><i>2999元</i></li><li><img src="img/hpul12.png"><h3>米家直驱洗烘一体机 10kg</h3><p>DD直驱电机 安静护衣</p><span>1999元起</span><i>2499元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul1.png"><h3>小米电视4A 70英寸</h3><p>4K超高清 | 人工智能语音系统 | 蓝牙语音遥控器</p><span>3199元起</span><i>3699元</i></li><li><img src="img/hpul2.png"><h3>小米电视4A 60英寸</h3><p>4K超高清 | 语音控制 | 2+8GB大存储</p><span>1899元起</span><i>2799元</i></li><li><img src="img/hpul3.png"><h3>小米电视 EA75 2022款</h3><p>金属全面屏 | 4K超高清 | 远场语音</p><span>2999元</span><i>4199元</i></li><li><img src="img/hpul4.png"><h3>小米全面屏电视65英寸 E65X</h3><p>4K超高清 | 内置小爱同学 | 海量内容</p><span>2599元起</span><i>2999元</i></li><li><img src="img/hpul5.png"><h3>Redmi智能电视A55</h3><p>4K超高清 | 智能语音 | 立体声澎湃音效</p><span>1399元起</span><i>1999元</i></li><li><img src="img/hpul6.png"><h3>Redmi MAX 86″ 超大屏电视</h3><p>多分区背光 | 双120Hz高刷 | HDMI 2.1接口</p><span>5999元起</span><i>7999元</i></li><li><img src="img/hpul7.png"><h3>小米电视 EA50 2022款</h3><p>金属全面屏 | 4K超高清 | 远场语音</p><span>1299元起</span><i>1800元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 生活电器 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>生活电器</i><div><a href="javascript:;" class="hot">扫地机</a><a href="javascript:;">空净</a><a href="javascript:;">清洁</a><a href="javascript:;">风扇</a></div></div><div class="tabSwitch_l"><img src="img/lf_big1.png"><img src="img/lf_big2.png"></div><ul class="tabSwitch_r  tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 广告 --><div class="advertising"><img src="img/bannerTop1.jpg"></div><!-- 厨房电器 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>厨房电器</i><div><a href="javascript:;" class="hot">净水器</a><a href="javascript:;">烟灶</a><a href="javascript:;">电饭煲</a><a href="javascript:;">微蒸烤</a></div></div><div class="tabSwitch_l"><img src="img/lf_big1.png"><img src="img/lf_big2.png"></div><ul class="tabSwitch_r  tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 智能家居 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>智能家居</i><div><a href="javascript:;" class="hot">小爱音箱</a><a href="javascript:;">门锁</a><a href="javascript:;">路由器</a><a href="javascript:;">智能设备</a></div></div><div class="tabSwitch_l"><img src="img/lf_big1.png"><img src="img/lf_big2.png"></div><ul class="tabSwitch_r  tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 运动出行 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>运动出行</i><div><a href="javascript:;" class="hot">平衡车/滑板车</a><a href="javascript:;">运动健身</a><a href="javascript:;">箱包配饰</a><a href="javascript:;">出行工具</a></div></div><div class="tabSwitch_l"><img src="img/lf_big1.png"><img src="img/lf_big2.png"></div><ul class="tabSwitch_r tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div><!-- 广告 --><div class="advertising"><img src="img/bannerTop1.jpg"></div><!-- 日用百货 --><div class="tabSwitch"><div class="tabSwitch_hd"><i>日用百货</i><div><a href="javascript:;" class="hot">个护健康</a><a href="javascript:;">电源/线材</a><a href="javascript:;">儿童用品</a><a href="javascript:;">家居床品</a></div></div><div class="tabSwitch_l"><img src="img/lf_big1.png"><img src="img/lf_big2.png"></div><ul class="tabSwitch_r tabSwitch_r_show"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li><img src="img/hpul14.png"><h3>米家冰箱无霜三门216L</h3><p>风冷无霜 三门三温区</p><span>1499元起</span><i>1699元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li><img src="img/hpul13.png"><h3>米家波轮洗衣机 10kg</h3><p>全景玻璃阻尼上盖 防夹手</p><span>1099元起</span><i>1499元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul15.png"><h3>米家冰箱无霜两门186L</h3><p>风冷无霜 离子抗菌</p><span>1289元起</span><i>1499元</i></li><li class="more1"><div><span>米家全自动波轮洗衣机8kg</span><small>799元</small></div><img src="img/hpul16.png"></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul><ul class="tabSwitch_r"><li><img src="img/hpul9.png"><h3>米家全能扫拖机器人</h3><p>免洗集尘全自动，一机解放双手</p><span>3699元起</span><i>5499元</i></li><li><img src="img/hpul10.png"><h3>米家扫拖机器人 2Pro</h3><p>扫拖除菌一步到位</p><span>1999元起</span><i>2099元</i></li><li><img src="img/hpul11.png"><h3>米家扫拖机器人 2</h3><p>经典延续，全面升级</p><span>1399元</span><i>1799元</i></li><li><img src="img/hpul12.png"><h3>米家集尘扫拖机器人</h3><p>自动倒垃圾，45天手不沾尘</p><span>1999元起</span><i>2299元</i></li><li class="more"><div class="iconfont">浏览更多<br/><small>热门</small></div></li></ul></div>

jquery：

    $('.tabSwitch_hd a').on('click', function() {$(this).addClass('hot').siblings().removeClass('hot');$(this).parents('.tabSwitch_hd').siblings('.tabSwitch_r').addClass('tabSwitch_now').parent('.tabSwitch').siblings('.tabSwitch').find('.tabSwitch_r').removeClass('tabSwitch_now');$('.tabSwitch_now').eq($(this).index()).addClass('tabSwitch_r_show').siblings().removeClass('tabSwitch_r_show');});

类名的添加的删除主要是为了保证是对事件当前对象的操作，其他模块同类名的部分不会随着更改

小米官网jQuery重构相关推荐

项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
jQuery的小米官网-----侧边导航栏
目录前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码总结前言时隔多 ...
使用jQuery完成小米官网图标
各位小伙伴们大家新年好呀!在此我祝愿各位在新的一年里顺风顺水,不脱头发早脱单.好了,废话不多说,因为之前写项目遇到过类似小米官网home图标那样的效果,最近发现对这块还有点遗忘了.所以咱们今天来通过j ...
小米官网重做jQuery
文章目录前言一.修改value里面的值二.登录和注册点击切换三.自动切换登录注册总结前言这次是使用jQuery来重新做小米官网里面的效果一.修改value里面的值 $("id ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
花季美少女和小米官网你选哪个？
前言花季少女和小米官网你选哪个?只有小孩子才做选择,你当然都会拥有!我们今天就看看花季美少女是怎么用jQuery写小米官网的,看看女孩子的思维和男孩子有什么不一样!css的东西我这里就不多说啦,时间 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
官网jquery压缩版引用地址
官网jquery压缩版引用地址: 3.1.1版本: <script src="https://code.jquery.com/jquery-3.1.1.min.js"> ...
使用html和css的一些案列（小米官网）
1.小米导航栏 html部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

小米官网jQuery重构

小米官网jQuery重构相关推荐

最新文章

热门文章