微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

Jquery实现挂号平台首页源码

发布时间:2020-03-11 来源:未知 点击:

带二级导航、轮播海报、二级联动、搜索功能、Tab选项卡

按照国际惯例先放图

index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>城市医院预约平台</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/ui.css">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>

<body>
    <div id="top" class="top">
        <div class="wrap">
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;&nbsp;
                <a href="#">登录</a>
                <a href="#">注册</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">帮助中心</a>
            </p>
        </div>
    </div>
    <div id="header" class="header">
        <div class="wrap clearfix">
            <a class="logo" href="index.html"><img src="./img/logo.png"></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">&nbsp;</a>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav" class="nav">
        <div class="wrap">
            <div class="link menu">全部科室
                <div class="menu-list ui-menu">
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">内科</a>
                        <a href="#1" class="ui-menu-item-disease">高血压</a>
                        <a href="#1" class="ui-menu-item-disease">冠心病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    内科
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    内科常见
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">外壳</a>
                        <a href="#1" class="ui-menu-item-disease">a疾病</a>
                        <a href="#1" class="ui-menu-item-disease">b疾病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    a疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    b疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">儿科</a>
                        <a href="#1" class="ui-menu-item-disease">c疾病</a>
                        <a href="#1" class="ui-menu-item-disease">d疾病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    c疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    d疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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="banner" class="banner">
        <div class="banner-slider ui-slider">
            <div class="ui-slider-wrap">
                <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
                <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
                <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
            </div>
            <div class="ui-slider-arrow">
                <a href="#l" class="item left">&nbsp;</a>
                <a href="#r" class="item right">&nbsp;</a>
            </div>
            <div class="ui-slider-process">
                <a href="#0" class="item item_focus">&nbsp;</a>
                <a href="#1" class="item item">&nbsp;</a>
                <a href="#2" class="item item">&nbsp;</a>
            </div>
        </div>
       <!--  二级联动 -->
        <div class="banner-search">
            <div class="caption"><span class="text">快速预约</span></div>
            <div class="form ui-cascading">
                <div class="line">
                    <select name="area" data-search="getDistinctArea" data-where="">
                        <option>医院地区</option>
                    </select>
                </div>
                <div class="line">
                    <select name="level" data-search="getLeveByArea" data-where="">
                        <option>医院等级1</option>
                        <option>医院等级2</option>
                    </select>
                </div>
                <div class="line">
                    <select name="name" data-search="getNameByAreaAndLevel" data-where="">
                        <option>医院名称2</option>
                    </select>
                </div>
                <div class="line">
                    <select name="department" data-search="getDepartmentArrByHospitalName" data-where="">
                        <option>医院科室3</option>
                    </select>
                </div>
            </div>
            <div class="submit">
                <input type="button" class="button" value="快速查询">
            </div>
        </div>
        <div class="banner-help">
            <div class="caption"><span class="text">帮助中心</span></div>
            <div class="list">
                <a href="#" class="link">账号指南</a>
                <a href="#" class="link">预约指南</a>
                <a href="#" class="link">账号找回</a>
                <a href="#" class="link">常见问题</a>
            </div>
        </div>
    </div>

    <div id="content" class="content">
        <div class="wrap clearfix">
            <!-- TAB选项卡 -->
            <div class="content-tab">
                <div class="caption">
                    <a href="#8" class="item item_focus">医院</a>
                    <a href="#7" class="item ">科室</a>
                </div>
                <div class="block">
                    <div class="item">
                        <div class="block-caption">
                            <a href="#1" class="block-caption-item block-caption-item_focus">全部</a>
                            <a href="#1" class="block-caption-item">东城区</a>
                            <a href="#1" class="block-caption-item">西城区</a>
                            <a href="#1" class="block-caption-item">朝阳区</a>
                            <a href="#1" class="block-caption-item">丰台区</a>
                            <a href="#1" class="block-caption-item">石景山区</a>
                            <a href="#1" class="block-caption-item">海淀区</a>
                            <a href="#1" class="block-caption-item">门头沟区</a>
                            <a href="#1" class="block-caption-item">房山区</a>
                            <a href="#1" class="block-caption-item">其他</a>
                        </div>
                        <div class="block-content">
                            <div class="block-wrap">
                                <div class="block-list clearfix">
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院">
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院">
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院">
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院">
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                </div>
                                <div class="block-text-list clearfix">
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                </div>
                                <a class="block-more">更多医院</a>
                            </div>
                            <div class="block-wrap" style="display: none;">
                                其他城区内容
                            </div>
                        </div>
                    </div>
                    <div class="item" style="display: none;">
                        科室内容
                    </div>
                </div>
            </div>
            <!-- 新闻列表 -->
            <div class="content-news">
                <div class="caption"> 最新公告 <a href="#8" class="more">|更多</a> </div>
                <div class="list">
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                </div>
            </div>
            <div class="content-close">
                <div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a> </div>
                <div class="list">
                    <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
                    <a href="#9" class="link">首都医科大学附属北京安贞医院妇</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">北京安贞医院妇</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">北京安贞医院妇</a>
                </div>
            </div>
        </div>
    </div>
    <div id="footer" class="footer">
        Copyright © 2019XXX版权所有
    </div>
    <a href="#" class="go-top"></a>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
</body>

</html>

这就是微学网-程序员之家为你提供的"Jquery实现挂号平台首页源码"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/9851.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 微信公众号 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版