本文重点解决Jquey实现挂号平台首页源码2问题,希望能够帮助到你
第二个版本：点击预约挂号可跳转到排班表，获取之后7个星期的排班
先放图
首先是index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- 框架 --> <link rel="stylesheet" href="css/layout.css"> <!-- 基本样式 --> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/ui.css"> </head> <body> <!-- 顶部 --> <div id="top" class="top"> <div class="wrap"> <p class="call">010-114/116114电话预约</p> <p class="welcome">欢迎来到城市医院预约挂号统一平台 请 <a href="">登录</a> <a href="">注册</a> <a href="">帮助中心</a></p> </div> </div> <!-- 头部 --> <div id="header" class="header"> <div class="wrap"> <a href="#" class="logo"><img src="./img/logo.png" alt=""></a> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#1">科室</a> <a href="#1">疾病</a> <a href="#1">医院</a> </div> <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"> <a href="#" class="ui-search-submit"> </a> </div> </div> </div> <!-- 导航 --> <div id="nav" class="nav"> <div class="wrap"> <a href="" class='link'>首页</a> <a href="" class='link'>按医院挂号</a> <a href="" class='link'>按科室挂号</a> <a href="" class='link'>按疾病挂号</a> <a href="" class='link'>最新公告</a> <a href="" class='link right'>社会知名医院</a> </div> </div> <!-- 简介 --> <div id="about" class="about"> <div class="wrap"> <div class="a-title"> <div class="a-title-left"> <span>北京协和医院</span> <span class="yellow">关注医院</span> </div> <div class="a-title-right"> <span><a href="">等级：</a>三级甲等</span> <span><a href="">区域：</a>东城区</span> <span><a href="">分类：</a>中国医科院所属医院</span> </div> </div> <div class="a-content"> <div class="a-content-left"><img src="img/hospital-1.jpg" alt=""></div> <div class="a-content-center"> <div class="text"><span class="t-span">医院（Hospital）一词是来自于拉丁文原意为“客人”。</span></div> <div class="text"><span class="t-span">医院（Hospital）一词</span></div> <div class="text"><span class="t-span">医院（Hospital）一词是来自于拉丁文</span></div> <div class="text"><span class="t-span">医院（Hospital）一词是来自于拉丁文原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。</span></div> </div> <div class="a-content-right"><img src="img/map-1.png" alt=""></div> </div> </div> </div> <!-- tab框 --> <div id="content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <!-- tab导航 --> <div class="caption"> <a href="#8" class="item item_focus">预约挂号</a> <a href="#7" class="item">医院介绍</a> <a href="#6" class="item">预约须知</a> <a href="#5" class="item">停诊信息</a> <a href="#4" class="item">查询取消</a> </div> <!-- tab内容 --> <div class="block"> <!-- 预约挂号 --> <div class="item"> <table class='table1' cellpadding='0' cellspacing='0' rules="rows"> <tr class="bg1"> <td colspan="2">开放预约科室</td> </tr> <tr> <td class="bg2">2301</td> <td> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> <a href="detail.html">特殊门诊科</a> </td> </tr> <tr> <td class="bg2">专科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> <tr> <td class="bg2">内科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> <tr> <td class="bg2">内科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> </table> <!-- 预约规则 --> <div class="content-news"> <div class="caption2"> 预约规则 <a href="" class="more">(更新时间，每日8:30更新)</a></div> <div class="list"> <table class="table3"> <tr> <td class="left">预约周期：</td> <td>7天</td> </tr> <tr> <td class="left">房号时间：</td> <td>8:30</td> </tr> <tr> <td class="left">预约周期：</td> <td>(更新时间，每日8:30更新)(更新时间，每日8:30更新)</td> </tr> <tr> <td class="left">预约周期：</td> <td>(更新时间，每日8:30更新)</td> </tr> <tr> <td class="left">特殊规则：</td> <td>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。<br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。</td> </tr> </table> </div> </div> </div> <!-- 医院介绍 --> <div class="item" style="display: none"> <p class="t-about">北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。</p> <p class="t-about">北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。</p> <p class="t-about">2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。</p> <p class="t-about">2018年12月4日消息，被国家卫健委公布为首批肿瘤多学科诊疗试点医院。 [2] 2019年11月10日，复旦版《2018年度中国医院排行榜》发布，北京协和居首。</p> </div> <!-- 预约须知 --> <div class="item" style="display: none"> <p class="p-title">北京协和医院预约挂号须知</p> <p class="p-about"><span>电话预约挂号：010(24小时）</span></p> <p class="p-about"><span>网络预约挂号：010(24小时）</span><br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院。</p> <p class="p-about"><span>一、预约时间范围：010(24小时）</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p> <p class="p-about"><span>二、预约实名制：</span><br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)。</p> <p class="p-about"><span>三、预约挂号：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p> <p class="p-about"><span>四、医生停诊</span><br>2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。</p> <p class="p-about"><span>五、医生停诊</span><br>2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。</p> <p class="p-about"><span>六、爽约处理：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p> <p class="p-about"><span>七、其他注意事项：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p> <p class="p-footer">北京协和医院</p> </div> <!-- 停诊信息 --> <div class="item" style="display: none"> <p class="p-title">停诊信息</p> <table class='table1 table2' cellpadding='0' cellspacing='0' rules='all'> <tr> <td>日期</td> <td>星期</td> <td>时段</td> <td>科室</td> <td>特长</td> <td>职称</td> <td>挂号费</td> <td>可挂号数</td> <td>剩余号数</td> <td>替换方式</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2019-11-14</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> </table> </div> <!-- 查询取消 --> <div class="item" style="display: none"> <div class='inner'> <div class="i-wrap"> <label for="">预约识别码：</label> <input type="text"> <input type="button" value="查询订单"> </div> </div> </div> </div> </div> </div> </div> <!-- 底部 --> <div id="footer" class="footer"> Copyright © 2019 xxx版权所有 </div> <script src="js/jquery-1.7.1.js"></script> <script src="js/ui.js"></script> </body> </html>
本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。
微信扫一扫打赏
支付宝扫一扫打赏
扫码加微信好友
© 2002-2022 星联科技(xinglianwangluo.com) 版权所有，并保留所有权利 老妖怪 蜀ICP备2024091751号-1
四川省广元市利州区
川公网安备 51080202000147号
