简单的table切换,记录



<!-- 好颐生开始 -->
            

                <style type="text/css" media="screen">
                    
                      .ZH_table{
                            width:1200px;/*height:1000px;*//*border:1px solid red;*/margin:30px auto;overflow: hidden;
                      }

                      .zh_table{
                            width:1200px;height:1000px;/*border:1px solid pink;*/margin:0 auto;
                      }

                      .zh_tit{
                          margin-bottom: 2px;
                      }

                      .zh_tit_s{
                           width:170px;height:50px;line-height:50px;text-align:center;font-size:24px;display:inline-block;margin-left:-3px;font-size:16px;background:#cccccc;color: white;cursor: pointer;
                      }
                       .zh_tit_s:hover{
                               background: #cc9966;
                       }
                      .zh_tit_s:nth-child(1){
                             margin-left: 0px;
                             background: #cc9966;

                      }
                      span{
                          cursor: pointer;
                      }

                /*内容样式*/
                    .zh_table_con{
                        display:none;width:1196px;/*height:1000px;*/font-size:72px;color:#000;/*background-color:#87CEFA;*//*border:1px solid gray;*/
                    }


             /**********************************************************************************************************************/

                     /*介绍开始*/


                           .zh_titjs{
                                    /*border: 1px solid red;*/
                                    height: 50px;
                                    margin-top: -40px;
                           }

                           .zh_tit_js{
                                   width: 100px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;/*border:1px solid #dc9643;*/border-radius:7px;display: inline-block;cursor: pointer;margin-top: 10px;color: white;background:#cccccc;                           }
                           .zh_tit_js:nth-child(1){
                                   margin-left: 20px;
                                  background: #cc9966;
                           }


                           .zh_table_js{
                                    display:none;width:1196px;height:1150px;font-size:72px;color:#000;/*background-color:#9999ff;*//*border:1px solid red;*/margin-top: 55px;
                           }


                          .btn_jm{
                              width:162px;height:60px;line-height:60px;background:#C78C44;color:#FFF;font-size:14px;border-radius:4px;cursor:pointer;display:inline-block;text-align:center;position:relative;top:-160px;left:43%;
                          }

                          #zh_js_img{
                                width: 100%;height: 1154px;
                          }









                     /*介绍结束*/



             /**********************************************************************************************************************/

                     /*标准开始*/



















                     /*标准结束*/





            /**********************************************************************************************************************/

                     /*技术培训开始*/



















                     /*技术培训结束*/


                /**********************************************************************************************************************/

                     /*无锡好颐生开始*/


                    .zh_tithys{
                        height: 50px;
                           margin-top: -40px;
                    }
                    .zh_tithys{
                                    /*border: 1px solid red;*/
                                    height: 50px;
                                    margin-top: -40px;
                           }

                    .zh_tit_hys{
                       width: 140px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;/*border:1px solid #dc9643;*/border-radius:7px;display: inline-block;cursor: pointer;margin-top: 10px;color:white;background:#cccccc;
                               }
                    .zh_tit_hys:nth-child(1){
                                   margin-left: 20px;
                                  background: #cc9966;
                           }


                     .zh_table_hys{
                                    display:none;width:1196px;height:1000px;font-size:72px;color:#000;/*background-color:#9999ff;*//*border:1px solid red;*/margin-top: 55px;
                           }

                       .zh_table_hys:nth-child(2){
                                 text-align: center;
                       }
                        .zh_table_hys:nth-child(5) p:nth-child(1){
                                margin-top: 100px;
                       }
                       .zh_table_hys:nth-child(3){
                                background:rgb(233, 240, 244);
                       }
                       video{
                                margin:110px 150px;
                       }

                       dd{
                             width: 180px;height: 240px;float:left;margin: 12px;border: 1px solid rgb(204, 153, 102);text-align: center;line-height: 220px;
                       }
                       dd:hover{
                              border: 2px solid rgb(204, 153, 102);
                       }

                       dd>img{
                           width: 166px;height: 226px;
                       }
                       dd:nth-child(1),dd:nth-child(6),dd:nth-child(11){
                              margin-left: 100px;
                       }
                       .zh_qwsc{
                            width: 900px;height: 700px;/*border: 1px solid red;*/margin:0 auto;line-height:600px;text-align: center;
                       }
                       .zh_qwsc>a>img{
                             width: 100%;height: 100%;
                       }












                     /*无锡好颐生结束*/




                /**********************************************************************************************************************/

                   /*咨询留言开始*/


                    .zh_zxly{
                        width: 500px;height: 400px;float:left;margin-left: 63px;margin-top:20px; border: 1px solid rgb(204, 153, 102);
                    }

                    .zh_zxly_p{
                        font-size: 16px;margin:12px auto;
                    }
                    .zh_zxly_p>span{
                        width:130px;height: 30px; line-height: 30px; display: inline-block;text-align:right;margin-right: 12px;
                    }

                    #textzxly{
                        width: 250px;height: 35px;border: 1px solid #dc9643;
                    }
                    .zh_zxly_p>textarea{
                        width: 250px;height: 75px;border: 1px solid #dc9643;margin-left: -3px;
                    }




                   /*咨询留言结束*/


                /**********************************************************************************************************************/


                /*联系我们样式 开始*/

                        .zh_table_con_six_img{
                            width:500px;height:400px;/*border:1px solid red;*/display: inline-block;text-align: center;
                        }

                        .zh_table_con_six_img img{
                            width:330px;height:330px;
                        }

                        .zh_table_con_six_img:nth-child(1){
                            margin-left: 86px;
                        }


                        #zh_text{
                            margin:50px auto;
                        }


                        .zh_table_con_six_txt{
                                font-size: 16px;
                                text-align: center;
                                margin: -123px auto;
                                margin-top: 140px;
                        }

                /*联系我们样式 结束*/

                /**********************************************************************************************************************/

                /*招聘人才开始*/


                         .zh_zprc{
                             width: 560px;height: 350px;border:1px solid #cc9966;float: left;padding: 12px;margin:18px;
                         }
                         .zh_zprc:nth-child(3),.zh_zprc:nth-child(4){
                             width:1156px;height: 400px;
                         }
                          
                         .zh_zprc h4{
                             margin:12px auto;
                         }
                         .zh_zprc h4>span{
                             color: red;
                         }
                          .zh_zprc p{
                             font-size: 16px;
                         }
                         #zprc_o,#zprc_t{
                             text-align: center;color: gray;font-size: 16px;
                         }
                         #zprc_o{
                             margin-top: 140px;
                         }




                /*招聘人才结束*/


                /**********************************************************************************************************************/








                </style>






                <div class="ZH_table">
                    <p class="anli-title" style="font-size:18px;color:#000;font-family: '微软雅黑';font-weight:300 ;margin:12px auto;"> 好颐生</p>        
                    
                     <div class="zh_table">
                       <!-- table列表的头部 -->
                                    <div class="zh_tit">
                                         <span class="zh_tit_s">介绍</span>
                                          <span class="zh_tit_s">标准</span>
                                          <span class="zh_tit_s">技术培训</span>
                                          <span class="zh_tit_s">无锡好颐生</span>
                                          <span class="zh_tit_s">咨询留言</span>
                                          <span class="zh_tit_s">联系我们</span>
                                          <span class="zh_tit_s">招聘人才</span>

                                    </div>

                       <!-- table列表的内容 -->
                             

                               <!-- 介绍 -->

                                  <div class="zh_table_con"  style="display:block;">
                                           

                                           <!-- 介绍内容标题 -->

                                            <div class="zh_titjs">
                                                 <span class="zh_tit_js">简介</span>
                                                  <span class="zh_tit_js">体系</span>
                                                  <span class="zh_tit_js">分类</span>
                                                  <span class="zh_tit_js">流程</span>
                                                  <span class="zh_tit_js">老师</span>
                                            

                                            </div>


                                        <!-- 介绍内容标题对应内容 -->
                                            <div class="zh_table_js"  style="display:block;">
                                                    <img src="__PUBLIC__/yxj/img/images/bannerjk.png" width="100%" height="436px" border="0" usemap="#Map" />
                                                    <a href="__APP__/Home1/duigong/jiam">
                                                        <p class="btn_jm">我要加盟</p>
                                                    </a>
                                            </div>
                                             <div class="zh_table_js">
                                                    <img src="__PUBLIC__/yxj/img/images/yxjzy.jpg" id="zh_js_img">
                                            </div>
                                             <div class="zh_table_js"  style="position:relative;">
                                                     <img src="/Public/yxj/img/images/szbj.jpg" width="100%" height="550px">
                                                     <img src="/Public/yxj/img/images/szzj.jpg"  style="position:relative;top:-500px;left:400px;">


                                                     <ul class="clear"style="position:absolute;top:180px; margin-left:22%; width:632px ;">
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;list-style:none ;"><a href="/index.php/Home1/duigong/sfxq.html"><img src="/Public/yxj/img/images/one.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;list-style:none ;"><a href="/index.php/Home1/duigong/gxmy.html"><img src="/Public/yxj/img/images/two.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;list-style:none ;"><a href="/index.php/Home1/duigong/ldsf.html"><img src="/Public/yxj/img/images/p.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;list-style:none ;"><a href="/index.php/Home1/duigong/djsl.html"><img src="/Public/yxj/img/images/k.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;margin-top:8px;list-style:none ;"><a href="/index.php/Home1/duigong/gtyy.html"><img src="/Public/yxj/img/images/there.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:10px;margin-right: 8px; float:left;margin-top:8px;list-style:none ;"><a href="/index.php/Home1/duigong/ajtl.html"><img src="/Public/yxj/img/images/w.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;margin-top:8px;list-style:none ;"><a href="/index.php/Home1/duigong/tsam.html"><img src="/Public/yxj/img/images/t.jpg" width="150px" height="150px"></a></li>
                                                        <li style="width:150px;height:150px;margin-right: 8px; float:left;margin-top:8px;list-style:none ;"><a href="/index.php/Home1/duigong/sdcl.html"><img src="/Public/yxj/img/images/u.jpg" width="150px" height="150px"></a></li>
                                                    </ul>

                                            </div>
                                             <div class="zh_table_js">
                                                    <img src="__PUBLIC__/yxj/img/images/lc.jpg" width="100%">
                                            </div>
                                             <div class="zh_table_js"  style="position:relative;">
                                                    <img src="/Public/yxj/img/images/szbj.jpg" width="100%" height="480">
                                                    <img src="/Public/yxj/img/images/szzj.jpg"  style="position:relative;top:-429px;left:400px;">
                                                    <ul style="position:absolute; top:100px; margin:34px 185px;width:1000px;height:300px;">
                                                        
                                                        <li style="width:15%;height:110px;float:left;margin-left:10px;list-style:none;<!-- border: 1px solid red; -->">
                                                            <img src="/Public/yxj/img/images/one.jpg">
                                                            <span style="color:#FFF;font-size:14px;">赵辉</span><span style="font-size:14px;color:#666666;position:relative;top:0px;left:10px;">魁拔1453年</span>
                                                            <div style="width:130px;height:100px;margin-top:10px;margin-left:1px;">
                                                                <div style="color:#848484;font-size:1px;font-family:'微软雅黑';height: 35px;overflow: hidden;">魁拔1453年诞生的新一代魁拔</div>
                                                            </div>
                                                        </li>   
                                                   
                                                    </ul>
                                            </div>
                                         


                                  </div>

                              <!-- 标准 -->

                                  <div class="zh_table_con">
                                           <img src="__PUBLIC__/yxj/img/images/yxjtu.jpg" width="100%" height="600px">
                                  </div>

                              <!-- 技术培训 -->

                                  <div class="zh_table_con">
                                           <img src="__PUBLIC__/yxj/img/images/px.jpg" width="100%" height="60%">
                                  </div>

                              <!-- 无锡好颐生 -->

                                  <div class="zh_table_con">
                                           

                                            <!-- 好颐生内容标题 -->

                                            <div class="zh_tithys">
                                                 <span class="zh_tit_hys">照片</span>
                                                  <span class="zh_tit_hys">视频</span>
                                                  <span class="zh_tit_hys">商城</span>
                                                  <span class="zh_tit_hys">动态</span>
                                                  <span class="zh_tit_hys">地点&联系方式</span>
                                            

                                            </div>


                                        <!-- 好颐生内容标题对应内容 -->
                                            <div class="zh_table_hys"  style="display:block;">
                                                   <dl>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys1.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys2.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys3.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys4.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys5.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys6.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys7.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys8.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys9.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys10.png" alt="" />
                                                           </dd>
                                                           <dd>
                                                               <img src="__PUBLIC__/Home1/img/duigong_hys/hys11.png" alt="" />
                                                           </dd>
                                                   </dl>
                                            </div>

                                             <div class="zh_table_hys">
                                                    <video width="893" height="450" controls>
                                                          <source src="#" type="video/mp4">
                                                          <source src="#" type="video/ogg">
                                                          您的浏览器不支持 HTML5 video 标签。
                                                    </video>
                                            </div>

                                             <div class="zh_table_hys" style="background:rgb(233, 240, 244);">
                                                  
                                                  <div class="zh_qwsc">
                                                       <a href="#"> <img src="__PUBLIC__/Home1/img/duigong_hys/qwsc.png" alt="前往商城" /> </a>  
                                                  </div>

                                            </div>

                                             <div class="zh_table_hys">
                                                   4
                                            </div>

                                             <div class="zh_table_hys">
                                                     <p class="zh_table_con_six_txt" style="margin-top: 300px;">联系方式:021-31773576</p>
                                                       <p class="zh_table_con_six_txt">地址:江苏省无锡市梁溪区学前东路301号</p>
                                            </div>








                                  </div>

                              <!-- 咨询留言 -->

                                  <div class="zh_table_con">
                                           





                                       <div class="zh_zxly">
                                           
                                       </div>

                                       <div class="zh_zxly">

                                       <form action="#">
                                                <p class="zh_zxly_p">
                                                        <span>姓名</span><input type="text" placehold="请输入姓名" id="textzxly" />

                                                 </p>
                                                 <p class="zh_zxly_p">
                                                       <span>联系方式</span><input type="text" placehold="请输入联系方式" id="textzxly" />

                                                 </p>
                                                 <p class="zh_zxly_p">
                                                       <span>留言</span>
                                                      <textarea name="" id="" cols="30" rows="10" style="overflow:hidden;">
                                                          

                                                      </textarea>

                                                 </p>



                                           <input type="submit" value="提交" style="width:100px;height:40px;line-height:30px;background:#cc9966;color:#fff;margin-left:292px;font-size:16px;" />
                                       </form>
                                                



                                       </div>




                                  </div>

                              <!-- 联系我们 -->

                                  <div class="zh_table_con">
                                           
                                        <div class="zh_table_con_six_img">
                                            <h3 id="zh_text">好颐生地址</h3>
                                            <img src="__PUBLIC__/Home1/img/duigong_hys/map.png" alt="地图" />
                                        </div>
                                        <div class="zh_table_con_six_img">
                                            <h3 id="zh_text">关注好颐生</h3>
                                             <img src="__PUBLIC__/Home1/img/duigong_hys/ewm.png" alt="二维码" />
                                        </div>

                                        <p class="zh_table_con_six_txt">联系方式:021-31773576</p>
                                       <p class="zh_table_con_six_txt">地址:江苏省无锡市梁溪区学前东路301号</p>
                                       

                                  </div>

                              <!-- 招聘人才 -->

                                  <div class="zh_table_con">
                                           
                                         <div class="zh_zprc">
                                              <h4>1.中医理疗师 <span>(工作地点:无锡)</span></h4>
                                             <p>职位月薪:6000—8000元</p>
                                             <p>招聘人数:15人</p>
                                             <p>任职资格:</p>
                                             <p>1、有医学基础或爱好中医养生者;</p>
                                             <p>2、有推拿、理疗工作经验者优先;</p>
                                             <p>3、具有良好的沟通能力,思维活跃、心胸宽广、个性平和、爱岗敬业;</p>
                                             <p>4、医学相关的应届毕业生,亦可作为高级储备人才培养。</p>


                                         </div>

                                         <div class="zh_zprc">
                                              <h4>2.客服经理 <span>(工作地点:无锡)</span></h4>
                                             <p>职位月薪:3000—6000元</p>
                                             <p>招聘人数:5人</p>
                                             <p>岗位职责:</p>
                                             <p>1、客户档案的归档及管理</p>
                                             <p>2、客户满意度的调查</p>
                                             <p>3、维护客户关系,处理客户投诉并及时解决;</p>
                                             <p>4、维护公司与老客户之间的关系,及时了解客户的新需求</p>
                                             <p>5、每天定期回访术后客人,解答术后注意事项并安抚</p>
                                             <p>6、整理客户资料,协助咨询部和医疗部查询客户资料</p>
                                             <p>7、会员接待与咨询意度的调查</p>
                                        
                                         </div>

                                         <div class="zh_zprc">
                                              <h4>3.综合理疗师 <span>(工作地点:无锡)</span></h4>
                                             <p>职位月薪:3000—6000元</p>
                                             <p>工作性质:全职</p>
                                             <p>最低学历:中专</p>
                                             <p>工作经验:不限</p>
                                             <p>招聘人数:10人</p>
                                             <p>岗位要求:</p>
                                             <p>1、品德优良:热爱中医养生行业,具有团队意识,踏实勤奋,乐观向上;</p>
                                             <p>2、个人素个人素质:具有学习中医的热情和能力,相貌端庄,身体健康,年龄20-30岁优先。</p>
                                             <p>3、专业基础:入职前接受系统培训</p>
                                             <p>岗位职责:</p>
                                             <p>1、认真学习专业的技能,不断进步,达到考核要求,在规定的时间内上岗服务;</p>
                                             <p>2、对客服热情细心,有服务意识与理念</p>
                                             <p>3、会总结与评估客户的反馈意见,及时向店长与技术总监沟通,调整治疗方案;</p>
                                             <p>4、保守行业秘密,坚守职业道德。</p>




                                         </div>

                                         <div class="zh_zprc">
                                              <h4>4.行政助理 <span>(工作地点:无锡)</span></h4>
                                             <p>职位月薪:2000—4000元</p>
                                             <p>任职资格:</p>
                                             <p>1、人力资源或行政管理相关专业大专以上学历,或1-3年人事行政工作经验</p>
                                             <p>2、熟悉人力资源管理各项实务的操作流程,熟悉国家各项劳动人事法规政 策,并能实3、际操作运用。</p>
                                             <p>3、具有良好的职业道德,踏实稳重,工作细心,责任心强,有较强的沟通、协调能力,有团队协作精神;</p>
                                             <p>4、熟练使用相关办公软件,具备基本的网络知识。</p>

                                             <p id="zprc_o">联系方式</p>
                                             <p id="zprc_t">好颐生人事部:0510—81192999</p>



                                         </div>




                                  </div>





                     </div>








                </div>
                <div class="clear" style="clear:both;"></div>





// 好颐生介绍JS


    var buttonArr = document.getElementsByClassName("zh_tit_s");
    // alert(buttonArr.length);
    var divArr = document.getElementsByClassName("zh_table_con");
    // alert(divArr.length);
    for(var i = 0; i < buttonArr.length;i++) {
        buttonArr[i].onclick = function() {
            for(var j = 0; j < buttonArr.length; j++) {
                buttonArr[j].style.backgroundColor = "#ccc";
                this.style.backgroundColor = "#cc9966";
                divArr[j].style.display = "none";
                if(this == buttonArr[j]) {
                    divArr[j].style.display = "block";
                }
            }
        }
    }

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>
// 介绍小标题里的内容


    var zhtit = document.getElementsByClassName("zh_tit_js");
    // alert(buttonArr.length);
    var zhcon = document.getElementsByClassName("zh_table_js");
    // alert(divArr.length);
    for(var i = 0; i < zhtit.length;i++) {
        zhtit[i].onclick = function() {
            for(var j = 0; j < zhtit.length; j++) {
                zhtit[j].style.backgroundColor = "#ccc";
                this.style.backgroundColor = "#cc9966";
                zhcon[j].style.display = "none";
                if(this == zhtit[j]) {
                    zhcon[j].style.display = "block";
                }
            }
        }
    }



// 无锡好颐生小标题里的内容


    var zhtithys = document.getElementsByClassName("zh_tit_hys");
    // alert(buttonArr.length);
    var zhconhys = document.getElementsByClassName("zh_table_hys");
    // alert(divArr.length);
    for(var i = 0; i < zhtithys.length;i++) {
        zhtithys[i].onclick = function() {
            for(var j = 0; j < zhtithys.length; j++) {
                zhtithys[j].style.backgroundColor = "#ccc";
                this.style.backgroundColor = "#cc9966";
                zhconhys[j].style.display = "none";
                if(this == zhtithys[j]) {
                    zhconhys[j].style.display = "block";
                }
            }
        }
    }





 <!-- 好颐生结束 -->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值