学习了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');
});类名的添加的删除主要是为了保证是对事件当前对象的操作，其他模块同类名的部分不会随着更改
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
