老师，能否看下我的点击门诊跳转到科室排班表的结构和动态，感觉没有思路
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>城市预约挂号统一平台</title> <link rel="stylesheet" href="css/layout.css"/> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/ui.css"/> <script 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">欢迎来到城市预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> </p> </div> </div> <div id="header" class="header"> <div class="wrap"> <div class="logo"> <img src="img/logo.png"/> </div> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#">科室</a> <a href="#">疾病</a> <a href="#">医院</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="#">首页</a> <a href="#">按医院挂号</a> <a href="#">按科室挂号</a> <a href="#">按疾病挂号</a> <a href="#">最新公告</a> </div> </div> <div class="hospital_intro"> <div class="wrap"> <div class="hospital"> <div class="hospital_caption"> <p class="name">北京协和医院<span class="subname">关注医院</span></p> <p class="info"> <a href="#">等级: <span>三级甲等</span></a> <a href="#">区域: <span>东城区</span></a> <a href="#">分类: <span>中国医科院所属医院</span></a> </p> </div> <div class="hospital_content"> <div class="left"></div> <div class="center"> <div class="item"> <i></i><span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木胡同41号</span> </div> <div class="item"> <i></i><span>http://www.pumch.cn/</span> </div> <div class="item"> <i></i>东院咨询台:010-69155564;西院咨询台:010-69158010 </div> <div class="item"> <i></i><span>东院：106,108,110,111,116,684,685到东单路口北；41,104块，814到东单路口南；1,52,728,802到东单路口西； 地铁1/5号线到东单。西院：68到比才胡同口；更多乘车路线详见须知</span> </div> </div> <div class="right"></div> </div> </div> </div> </div> <div class="hospital_system"> <div class="wrap"> <div class="hospital_system_caption"> <a class="item item_focus" href="javascript:;">预约挂号</a> <a class="item " href="javascript:;">医院介绍</a> <a class="item " href="javascript:;">预约通知</a> <a class="item " href="javascript:;">停诊信息</a> <a class="item " href="javascript:;">查询取消</a> </div> <div class="hospital_system_content"> <div class="item"> <div class="appointment_office"> <div class="appointment_office_caption">预约开放科室</div> <div class="appointment_office_content"> <div class="item"> <div class="item_caption">2301</div> <div class="item_content"> <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">特殊门诊科</a> <a href="#" class="link">特殊门诊科</a> <a href="#" class="link">特殊门诊科</a> <a href="#" class="link">特殊门诊科</a> <a href="#" class="link">特殊门诊科</a> </div> <!-- 科室排班表--> <div class="section_schedule" style="display: none"> <div class="item">特殊门诊科1</div> <div class="item">特殊门诊科2</div> </div> </div> <div class="item"> <div class="item_caption">专科</div> <div class="item_content"> <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">门诊麻醉科</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">门诊麻醉科</a> <a href="#" class="link">门诊麻醉科</a> </div> </div> <div class="item"> <div class="item_caption">内科</div> <div class="item_content"> <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">肿瘤内科门诊</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">肿瘤内科门诊</a> <a href="#" class="link">肿瘤内科门诊</a> </div> </div> <div class="item"> <div class="item_caption">内科</div> <div class="item_content"> <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">特需血液内科</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">特需血液内科</a> <a href="#" class="link">特需血液内科</a> </div> </div> </div> </div> <div class="rule"> <div class="rule_caption">预约规则 <span>(更新时间每日8:30更新)</span></div> <div class="rule_content"> <div class="rule_content_item"> <p>预约周期：<span>7天</span></p> </div> <div class="rule_content_item"> <p>放号时间：<span>8:30</span></p> </div> <div class="rule_content_item"> <p>停挂时间：<span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span></p> </div> <div class="rule_content_item"> <p>退号时间：<span>就诊前一工作日14:00前取消</span></p> </div> <div class="rule_content_item"> <p>特殊规则：<span>取号地点不同：西园区预约取号地点：西园区门诊一号大厅挂号窗口取号。 东园区预约取号地点：东园区门诊一号大厅挂号窗口取号</span></p> </div> </div> </div> </div> <div class="item" style="display: none"><img src="img/page2.jpg"/></div> <div class="item" style="display: none"><img src="img/page3.jpg"/></div> <div class="item" style="display: none"><img src="img/page4.jpg"/></div> <div class="item search" style="display: none"> <div class="search_detail"> <span>预约识别码 : </span> <input type="text"/> <p class="button"> <a href="#">查询订单</a> </p> </div> </div> </div> </div> </div> <div id="footer" class="footer"> Copyright © 2017慕课网版权所有 </div> <script src="js/ui.js"></script> </body> </html>
layout.css
/*页面布局样式*/
*{
padding: 0;
margin: 0;
}
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
}
select,input{
border: 0;
outline: 0;
}
#top{
height: 30px;
background-color: #f5f5f5;
}
#header{
height: 92px;
}
#nav{
height: 35px;
background-color: #60bff2;
}
.hospital_intro{
height: 258px;
margin: 30px 0 40px 0;
}
.hospital{
height: 230px;
background-color: #f7f7f7;
}
.hospital_system{
height: 460px;
margin-bottom: 80px;
}
.hospital_system_caption{
height: 30px;
border-bottom: 2px solid #60bff2;
margin-bottom: 20px;
}
.hospital_system_content{
height: 410px;
}
.appointment_office{
width: 708px;
height: 408px;
border: 1px solid #f4f6fa;
float: left;
}
.rule{
width: 273px;
height: 282px;
border: 1px solid #f4f6fa;
float: right;
}
#footer{
height: 70px;
background-color: #eceef2;
}index.css
/*页面样式*/
/*top模块*/
a {
text-decoration: none;
}
.top {
line-height: 30px;
color: #868686;
font-size: 14px;
}
.top p.call {
float: left;
background: url("../img/icon-call.png") no-repeat 0 5px;
text-indent: 20px;
}
.top p.welcome {
float: right;
}
.top p.welcome a {
color: #2da5e1;
}
/*header 模块*/
.header .logo {
width: 350px;
height: 58px;
padding: 20px 15px;
}
.header .logo img {
width: 100%;
height: 100%;
}
.header .search {
width: 328px;
height: 38px;
background-color: orange;
position: absolute;
right: 0;
top: 29px;
}
/*nav 模块*/
.nav {
line-height: 35px;
}
.nav a {
display: inline-block;
padding-left: 53px;
color: #fff;
}
.nav a:hover {
color: #d7f3ff;;
}
/*hospital_intro 医院介绍*/
.hospital {
padding: 15px 25px 20px 25px;
}
.hospital_caption {
height: 35px;
border-bottom: 2px solid #dcdddd;
}
.hospital_caption p {
font-size: 16px;
}
.hospital_caption .subname {
font-size: 14px;
color: #f29600;
margin-left: 13px;
}
.hospital_caption p.name {
float: left;
}
.hospital_caption p.info {
float: right;
}
.hospital_caption p.info a {
color: #0000ff;
margin-right: 14px;
}
.hospital_caption p.info a:last-child {
margin-right: 0;
}
.hospital_caption p.info span {
color: #000;
}
.hospital_content {
margin-top: 10px;
}
.hospital_content .left {
width: 200px;
height: 150px;
background: url("../img/hospital-1.jpg");
float: left;
}
.hospital_content .center {
width: 447px;
height: 157px;
float: left;
margin-left: 30px;
}
.center .item {
font-size: 14px;
color: #888888;
margin-bottom: 18px;
}
.center .item span {
line-height: 23px;
}
.center .item i {
display: inline-block;
width: 15px;
height: 16px;
margin-right: 15px;
}
.center .item:first-child i {
background: url("../img/icon-web.png") 0 0;
}
.center .item:nth-child(2) i {
background: url("../img/icon-web.png") 0 -22px;
}
.center .item:nth-child(3) i {
background: url("../img/icon-web.png") 0 -44px;
}
.center .item:last-child i {
background: url("../img/icon-web.png") 0 -65px;
}
.hospital_content .right {
float: right;
width: 250px;
height: 165px;
background: url("../img/map-1.png");
}
/*hospital_system 医院体系*/
.hospital_system_caption a {
display: inline-block;
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
color: #60bff2;
}
.hospital_system_caption a.item_focus {
background-color: #60bff2;
color: #fff;
}
.hospital_system_content .search {
margin-top: 90px;
height: 200px;
border: 1px solid #DCDDDD;
position: relative;
}
.search .search_detail {
width: 420px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -210px;
}
.search_detail span {
float: left;
}
.search_detail input {
height: 30px;
width: 194px;
border: 1px solid #dcdcdc;
float: left;
}
.search_detail .button {
float: left;
width: 110px;
height: 30px;
margin-left: 5px;
line-height: 30px;
text-align: center;
background-color: #00B3EC;
}
.search_detail .button a {
color: #fff;
}
.appointment_office_caption {
height: 44px;
background-color: #f4f6fa;
line-height: 40px;
padding-left: 30px;
}
.appointment_office_content .item {
height: 90px;
border-bottom: 1px solid #f4f6fa;
}
.appointment_office_content .item_caption {
width: 144px;
height: 80px;
background-color: #f2fbff;
float: left;
text-align: center;
padding-top: 10px;
}
.appointment_office_content .item_content {
width: 560px;
height: 100%;
float: left;
}
.appointment_office_content .item_content .link{
display: inline-block;
width: 100px;
height: 27px;
margin-left: 20px;
padding-top: 3px;
color: #4c4948;
}
.rule {
overflow: auto;
}
.rule_caption {
height: 40px;
padding-left: 10px;
background-color: #f4f6fa;
line-height: 40px;
color: #606060;
}
.rule_caption span {
font-size: 14px;
color: #00b3ea;
}
.rule_content {
height: 244px;
padding: 15px 10px;
}
.rule_content .rule_content_item {
line-height: 22px;
margin-bottom: 10px;
}
.rule_content .rule_content_item p {
width: 100%;
color: #555555;
}
.rule_content .rule_content_item span {
color: #888888;
}
/*footer 模块*/
.footer {
text-align: center;
line-height: 70px;
color: #acacac;
font-size: 14px;
}ui.css
/* 搜索 */
.ui-search{
background: url(../img/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
}
.ui-search-select-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top: 36px;
z-index: 2;
}
.ui-search-select-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
top: 7px;
left: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}//ui-search定义
$.fn.UiSearch=function(){
var ui=$(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
})
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected').text($(this).text());
$('.ui-search-select-list').hide();
return false;
})
$('body').on('click',function(){
$('.ui-search-select-list').hide();
return false;
});
}
//ui-tab定义
$.fn.UiTab=function(header,content){
var ui=$(this);
var tabs=$(header,ui);
var cons=$(content,ui);
tabs.on('click',function(){
var index=$(this).index();
tabs.removeClass('item_focus').eq(index).addClass('item_focus');
cons.hide().eq(index).show();
return false;
})
}
//页面脚本逻辑
$(function(){
$('.ui-search').UiSearch();
$('.hospital_system').UiTab('.hospital_system_caption >.item','.hospital_system_content >.item');
$('.hospital_system .appointment_office_content .item_content')
.UiTab('.item_content .link','.section_schedule >.item');
})
7
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星