标签：
1 <div id="lx-ui-div"> 2 <img src="image/MenuBoder.png" /> 3 <ul id="lx-index-ui"> 4 <li name="shouye">首 页</li> 5 <li name="guanyu">关于我们</li> 6 <li name="lianxi">联系我们</li> 7 <li name="chengpin">诚聘英才</li> 8 <li name="anzhuang">安装服务</li> 9 <li name="zhaoshang">招商加盟</li> 10 <li name="shangxue">商 学 院</li> 11 </ul> 12 </div>
上面是li标签
以下是切换事件内容
1 <!-- =======================================首页================================================ --> 2 <div id="shouye" class="lx-aboutpanel"> 3 <!-- 广告 --> 4 <div id="ei-index-AD"> 5 </div> 6 7 8 <div id="lx-index-body"> 9 <div id="ei-index-tellCXTWrap"></div> 10 <!-- 具体介绍 --> 11 <ul class="clearfix" id="ei-index-introduce"> 12 <li class="ei-index-intro"> 13 <div id="icon1"></div> 14 <h2>高质量</h2> 15 <p>服务保障</p> 16 <p>一年质保</p> 17 <p>终身维修</p> 18 </li> 19 <li class="ei-index-intro"> 20 <div id="icon2"></div> 21 <h2>更划算</h2> 22 <p>价格透明</p> 23 <p>安装实惠</p> 24 <p>价低质优</p> 25 </li> 26 <li class="ei-index-intro"> 27 <div id="icon3"></div> 28 <h2>更专业</h2> 29 <p>专业服务</p> 30 <p>专业团队</p> 31 <p>极品一流</p> 32 </li> 33 <li class="ei-index-intro"> 34 <div id="icon4"></div> 35 <h2>更便捷</h2> 36 <p>便捷操作</p> 37 <p>下单便捷</p> 38 <p>效率速达</p> 39 </li> 40 <li class="ei-index-intro"> 41 <div id="icon5"></div> 42 <h2>更贴心</h2> 43 <p>完美善后</p> 44 <p>24小时热线</p> 45 <p>在线咨询</p> 46 </li> 47 48 </div> 49 50 </div> 51 52 53 <!-- =======================================首页end============================================ --> 54 <!-- =======================================关于我们============================================= --> 55 <div id="guanyu" class="lx-aboutpanel"> 56 关于 57 <!-- -----公司简介----- --> 58 <div id="jianjie" class="lx-guanyuPanel"> 59 <div class="lx-company-div-title"> 60 公司简介 61 </div> 62 <p class="lx-company-p" id="lx-company-jianjie"> 63 公司专注于移动互联网创新应用，致力于五金卫浴、家居等围绕家庭的O2O移动服务平台。我们的小伙伴来自知名电商、互联网、家居、卫浴各个行业。 64 <br/><br/> 65 “易安装”基于微信服务号和APP提供卫浴、五金安装、家具、灯饰等家庭生活安装提供的一站式服务；结合家装建材、卫浴洁具、生活服务电子商务产业发展趋势，建立家具、建材、卫浴等产业售后安装维护服务平台。 66 <br/><br/> 67 解决客户安装问题，给师傅提供接单需求，集上门安装、代理送货，提货上门，售后回访服务于一体，打造公正、公平、透明的第三方服务平台。 68 <br/><br/> 69 易于简便，安装快捷。易安装平台，为师傅和用户架好桥梁，安全可靠又及时，价格体系标准透明化，让用户用的放心，师傅装的开心。 70 <br/><br/> 71 72 </p> 73 </div> 74 <!-- -----用户协议----- --> 75 <div id="xieyi" class="lx-guanyuPanel"> 76 <div class="lx-company-div-title"> 77 用户协议 78 </div> 79 <p class="lx-company-p" id="lx-company-jianjie"> 80 公司专注于移动互联网创新应用，致力于五金卫浴、家居等围绕家庭的O2O移动服务平台。我们的小伙伴来自知名电商、互联网、家居、卫浴各个行业。 81 <br/><br/> 82 “易安装”基于微信服务号和APP提供卫浴、五金安装、家具、灯饰等家庭生活安装提供的一站式服务；结合家装建材、卫浴洁具、生活服务电子商务产业发展趋势，建立家具、建材、卫浴等产业售后安装维护服务平台。 83 <br/><br/> 84 解决客户安装问题，给师傅提供接单需求，集上门安装、代理送货，提货上门，售后回访服务于一体，打造公正、公平、透明的第三方服务平台。 85 <br/><br/> 86 易于简便，安装快捷。易安装平台，为师傅和用户架好桥梁，安全可靠又及时，价格体系标准透明化，让用户用的放心，师傅装的开心。 87 <br/><br/> 88 89 </p> 90 </div> 91 <!-- -----公司动态----- --> 92 <div id="dongtai" class="lx-guanyuPanel"> 93 <div class="lx-company-div-title"> 94 公司动态 95 </div> 96 <p class="lx-company-p" id="lx-company-jianjie"> 97 公司专注于移动互联网创新应用，致力于五金卫浴、家居等围绕家庭的O2O移动服务平台。我们的小伙伴来自知名电商、互联网、家居、卫浴各个行业。 98 <br/><br/> 99 “易安装”基于微信服务号和APP提供卫浴、五金安装、家具、灯饰等家庭生活安装提供的一站式服务；结合家装建材、卫浴洁具、生活服务电子商务产业发展趋势，建立家具、建材、卫浴等产业售后安装维护服务平台。 100 <br/><br/> 101 解决客户安装问题，给师傅提供接单需求，集上门安装、代理送货，提货上门，售后回访服务于一体，打造公正、公平、透明的第三方服务平台。 102 <br/><br/> 103 易于简便，安装快捷。易安装平台，为师傅和用户架好桥梁，安全可靠又及时，价格体系标准透明化，让用户用的放心，师傅装的开心。 104 <br/><br/> 105 106 </p> 107 </div> 108 109 </div> 110 <!-- =======================================关于我们end========================================== --> 111 <!-- =======================================联系我们================================================ --> 112 <div id="lianxi" class="lx-aboutpanel"> 113 <div id="weixin"><img src="image/CallMeWeixin.png" /></div> 114 115 <div id="map"><img src="image/CallMe.png" /></div> 116 </div> 117 <!-- =======================================联系我们end================================================ --> 118 <!-- =======================================诚聘英才================================================ --> 119 <div id="chengpin" class="lx-aboutpanel"> 120 诚聘 121 </div> 122 <!-- =======================================诚聘英才end================================================ --> 123 <!-- =======================================安装服务================================================ --> 124 <div id="anzhuang" class="lx-aboutpanel"> 125 安装 126 </div> 127 <!-- =======================================安装服务end================================================ --> 128 <!-- =======================================招商加盟================================================ --> 129 <div id="zhaoshang" class="lx-aboutpanel"> 130 招商 131 </div> 132 <!-- =======================================招商加盟end================================================ --> 133 <!-- =======================================商学院================================================ --> 134 <div id="shangxue" class="lx-aboutpanel"> 135 学院 136 </div> 137 <!-- =======================================商学院end================================================ -->
以下是js
1 //菜单默认选择颜色&背景 2 $(‘li[name="shouye"]‘).css({ 3 ‘color‘:‘#FFFFFF‘, 4 ‘background‘:‘#34a82b‘ 5 }); 6 //菜单事件切换 7 $(‘#lx-index-ui li‘).click(function(){ 8 var _this=$(this); 9 10 $(‘#lx-index-ui li‘).css({ 11 ‘color‘:‘#34a82b‘, 12 ‘background‘:‘#FFFFFF‘ 13 }); 14 _this.css({ 15 ‘color‘:‘#FFFFFF‘, 16 ‘background‘:‘#34a82b‘ 17 }); 18 $(‘.lx-aboutpanel‘).css(‘display‘,‘none‘); 19 switch(_this.attr(‘name‘)){ 20 case ‘shouye‘: 21 $(‘#shouye‘).css(‘display‘,‘block‘); 22 break; 23 case ‘guanyu‘: 24 $(‘#guanyu‘).css(‘display‘,‘block‘); 25 break; 26 case ‘lianxi‘: 27 $(‘#lianxi‘).css(‘display‘,‘block‘); 28 break; 29 case ‘chengpin‘: 30 $(‘#chengpin‘).css(‘display‘,‘block‘); 31 break; 32 case ‘anzhuang‘: 33 $(‘#anzhaung‘).css(‘display‘,‘block‘); 34 break; 35 case ‘zhaoshang‘: 36 $(‘#zhaoshang‘).css(‘display‘,‘block‘); 37 break; 38 case ‘shangxue‘: 39 $(‘#shangxue‘).css(‘display‘,‘block‘); 40 break; 41 } 42 });
欢迎大家交流学习
标签：
原文地址：http://www.cnblogs.com/GetAlert/p/4384339.html
