js代码重新上传
具体遇到的问题
1.无法将html代码通过js载入到schedule_box_wrap中.
2.调用调用UiSearch方法后点击超链接（返回科室列表）无法跳转
报错信息的截图
相关课程内容截图
尝试过的解决思路和结果
粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码
scheduling.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>scheduling</title>
<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/css.css">
<link rel="stylesheet" type="text/css" href="./css/scheduling.css">
</head>
<body>
<!-- 顶部 -->
<div class="top" id="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 class="header" id="header">
<div class="wrap">
<a href="index.html" class="logo"></a>
<div class="search">
<div class="ui-search-select" >医院</div>
<div class="search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" placeholder="请输入搜索内容" class="search-content">
<a href="#" class="search-submit"> </a>
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav" id="nav">
<div class="wrap">
<a href="#1" class="link">首页</a>
<a href="#1" class="link">按医院挂号</a>
<a href="#1" class="link">按科室挂号</a>
<a href="#1" class="link">按疾病挂号</a>
<a href="#1" class="link">最新公告</a>
<a href="#1" class="famous">社会知名医院</a>
</div>
</div>
<!-- 医院简介 -->
<div class="introduce" id="introduce">
<div class="wrap">
<div class="introduce_title">
<div class="name">
<p>北京协和医院</p>
<span>关注医院</span>
</div>
<div class="type">
<span class="common">等级:</span>
<span class="common">三等甲级</span>
<span class="common">区域:</span>
<span class="common">东城区</span>
<span class="common">分类:</span>
<span class="common">中国医科院所属医院</span>
</div>
</div>
<div class="line"></div>
<div id="introduce-con" class ="introduce-con">
<img src="img/hospital-1.jpg" class="hospital-img" />
<div>
<p><span class="address"></span>[东院]北京市东城区帅府园一号</p>
<p><span class="internet"></span> http://www.puch.cn/</p>
<p><span class="consult-tel"></span>东院咨间台:010-681554；西院咨间台010-63158010</p>
<p>
<span class="route"></span>东院：106，108,110,111，116,684，685到东单路口北；41，104快，814到东单路
</p>
<p class="textindent">口南；1，52，728，602到东单路口西;20，25，37，3，到东单路口东;</p>
<p class="textindent">
103，104,420,803，到新东安市场;地铁1、5号线到东单。西院:68到辞才胡同东口;
</p>
<p class="textindent">
口;更多乘车陷线详见灰知
</p>
</div>
<img src="img/map-1.png" class="hospital-map" />
</div>
</div>
</div>
</div>
<!-- 主内容 -->
<div class="scheduling">
<div class="title">
<span>科室排班表</span>
<a href="./hospital_detail.html">返回科室列表</a>
</div>
<div class="main">
<div class="appointment-time">
<div class="emp" id="prv"> </div>
<div class="appointment-time-con">上午</div>
<div class="appointment-time-con">下午</div>
<div class="appointment-time-con">晚上</div>
</div>
<div class="schedule_box">
<div class="schedule_box_wrap" id="schedule_box_wrap">
</div>
</div>
<div class="item">
<div class="emp" id="next"></div>
</div>
<div class="rule">
<div class="title">
<span>预约规则</span>
<span></span>
</div>
<div class="rule-main">
<div> 预约周期：<br><span>7天</span></div>
<div> 放号时间：<br><span>8:30</span></div>
<div class="time"> 停挂时间：<br><span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span></div>
<div> 退号时间：<br><span>就诊前一工作日14:00前取消</span></div>
<div class="spacial">特殊规则：<br>
<span>① 取号地点不同:西院区预约取号地点:西院区门诊一层大厅挂号窗口取号。东院区预约取号地点:东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</span> </div>
</div>
</div>
</div>
<div class="footer" id="footer">Copyright © 2017慕课网版权所有</div>
<div class="toTop"></div>
<script type="text/javascript" src="./js/js.js"></script>
</body>
</html>
scheduling.css
.scheduling{
width: 1000px;
margin:0 auto;
position: relative;
}
.scheduling .title{
height: 50px;
width: 100%;
line-height: 50px;
font-size: 16px;
}
.scheduling .title span{
color: #000;
}
.scheduling .title a{
color: #60bff2;
display: inline-block;
margin-left: 10px;
}
.main{ border:solid 1px #ccc;overflow: hidden; height: 330px;}
.main .appointment-time{
width: 40px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.appointment-time .appointment-time-con{
height: 99px;
line-height: 100px;
border-bottom:solid 1px #ccc;
}
.appointment-time .emp{height: 40px;border-bottom:solid 1px #ccc;background: url(../img/icon-scheduling-left.jpg) no-repeat center center;cursor: pointer;}
.schedule_box{
width: 638px;
height: 330px;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.schedule_box_wrap{
width: 9999px;
height: 330px;
}
.main > div:nth-child(3){
width: 40px;
height: 330px;
}
.item .emp{
height: 39px;background: url(../img/icon-scheduling-right.jpg) no-repeat center center;cursor: pointer;}
.scheduling .main > div{
float: left;
display: inline-block;
}
.rule-main span{
font-size: 15px;
color: #666;
}
.appointment-time .emp{height: 40px;}
.scheduling .rule{
width: 260px;
height: 330px;
display: inline-block;float: right;
box-sizing: border-box;
padding-left: 5px;
overflow-y:auto;
border-left: solid 1px #ccc;
}
.rule-main .time{height: 75px;}
.rule-main .spacial{display: inline-block; color: #333;height: 25px;line-height: 25px}
.rule-main .spacial-rule{
float: right;
display: inline-block;
color: #666;
height:300px;
width: 200px;
margin-top:0px;
}
.rule .title span:first-child{
font-size: 18px;
color: #333;
}
css.css
*{
padding:0;
margin:0;
border:0;
}
a{text-decoration: none;}
select,input{border: none;outline: none;}
table{
border-collapse: collapse;
border-spacing: 0px;
}
/*顶部*/
.top {
line-height: 30px;
font-size: 13px;
color: #868686;
background-color: #f5f5f5;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
.top .wrap .call{
float: left;
padding-left: 20px;
background: url(../img/icon-call.png) no-repeat center left;
}
.top .wrap .welcome{
float: right;
}
.top .wrap .welcome a{
color: #2da5e1;
padding-left: 10px;
}
.top .wrap:after{
clear:both;
content:'';
display:block;
width:0;
height:0;
visibility:hidden;
}
/*头部*/
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
background: url(../img/logo.png) no-repeat center left;
background-size: 402px 74px;
cursor: pointer;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
background: url(../img/ui-search.jpg) no-repeat center left;
}
/*导航栏*/
.nav{
height: 36px;
background-color: #60bff2;
}
.nav .link{
line-height: 36px;
color:#fff ;
display: inline-block;
margin-right: 20px;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .famous{
line-height: 36px;
color: #fff;
display: inline-block;
padding-left: 30px;
font-size: 16px;
min-width: 80px;
text-align: center;
position: absolute;
right: 0px;
}
.nav .link:hover,.nav .famous:hover{
color: #87CEEB;
}
/*医院简介部分*/
.introduce .wrap{
background-color: #F7F7F7;
margin-top: 20px;
overflow: hidden;
}
.introduce .introduce_title{
height: 50px;
display: inline-block;
position: relative;
line-height: 50px;
width: 100%;
}
.introduce .introduce_title .name{position: absolute;left: 0; display: inline-block;}
.introduce .introduce_title .name p{
font-size: 16px;
color: #000;
display: inline-block;
margin-left: 20px;
}
.introduce .introduce_title .name span{
font-size: 12px;
color: orange;
}
.introduce .introduce_title .type{
font-size: 12px;
position: absolute;
right: 0;
display: inline-block;
margin-right: 20px;
}
.introduce .introduce_title .type .common:nth-child(2n+1){
color: blue;
}
.introduce .introduce_title .type .common:nth-child(2n){
color: #000;
padding-right: 10px;
}
.introduce .introduce_title .type .common:last-child{
padding-right: 0px;
}
.line{
height: 1px;
background-color: #ccc;
margin: 0 20px;
box-sizing: border-box;
}
.introduce-con{
margin: 20px;
box-sizing: border-box;
}
.introduce-con div {
float: left;
width: 475px;
height: 170px;
font-size: 11px;
margin: 0 20px;
}
.introduce-con p {
height: 18px;
line-height: 18px;
margin: 6px 0;
}
.introduce-con div span {
float: left;
width: 18px;
height: 18px;
vertical-align: -5px;
}
.hospital-img {
float: left;
width: 190px;
height: 132px;
}
.hospital-map {
float: right;
width: 254px;
height: 166px;
margin-bottom: 30px;
}
.introduce-con .address,.introduce-con .internet,.introduce-con .consult-tel,.introduce-con .route{
background: url('../img/icon-web.png') no-repeat 0px 0px;
display: inline-block;
}
.introduce-con .internet {
background-position: 0px -22px;
}
.introduce-con .consult-tel {
background-position: 0px -44px;
}
.introduce-con .route {
background-position: 0px -64px;
}
.introduction-massege .textindent {
margin-left: 58px;
}
/*主体内容*/
.content{
margin-top: 25px;
}
/*tab导航栏*/
.reservation-menu{
width: 1000px;
margin:0 auto;
position: relative;
}
.reservation-menu a{
display: inline-block;
height: 50px;
width: 120px;
line-height: 50px;
text-align: center;
color: #60bff2;
font-weight: bold;
}
.reservation-menu .focus{
color: #fff;
background-color: #60bff2;
}
.reservation-menu:after{
content:'';
display:block;
height: 2px;
background-color: #60bff2;
}
/*预约挂号页*/
.content .Registration .department{
width: 650px;
display: inline-block;
overflow: hidden;
margin-top: 25px;
}
.content .Registration .department .title{
text-indent: 20px;
height: 42px;
line-height: 30px;
font-size: 16px;
}
.content .Registration .department .main .name{display: inline-block;}
.content .Registration .department .main .name-con{
width: 125px;
height: 90px;
font-size: 14px;
font-weight: bold;
color: #666;
position: relative;
text-align: center;
}
.content .Registration .department .concretely{
display: inline-block;
float: right;
}
.concretely .concretely-con a{
width: 127px;
height: 30px;
line-height: 30px;
color:#333 ;
font-size: 14px;
font-weight: bold;
text-align: center;
display: inline-block;
}
.content .Registration .rule{
width: 330px;
height: 330px;
display: inline-block;float: right;
box-sizing: border-box;
padding-left: 45px;
overflow-y:auto;
}
.rule .title{
height: 35px;
line-height: 35px;
margin-bottom: 10px;
}
.rule .title span:first-child{
font-size: 16px;
color: #333;
}
.rule .title span:last-child{
font-size: 14px;
color: #60bff2;
}
.rule .main div{
font-size: 15px;
color: #333;
height: 25px;
line-height: 25px;
}
.rule .main span{
font-size: 15px;
color: #666;
}
.rule .main p{font-size: 15px;}
.rule .main .time{height: 50px;}
.rule .main .spacial{display: inline-block; color: #333;height: 25px;line-height: 25px}
.rule .main .spacial-rule{
float: right;
display: inline-block;
color: #666;
height:300px;
width: 200px;
margin-top:0px;
}
/*医院介绍页*/
.content .introduction{
margin-bottom: 30px;
display: none;
}
.content .introduction p{
font-size: 14px;
color: #666;
padding: 20px 0 0 0;
line-height: 25px;
text-indent: 28px;
}
/*预约须知页*/
.content .note{
margin-bottom: 30px;
display: none;
}
.note > h3,
.note h5:last-child{
text-align: center;
margin: 20px 0;
}
.note div{
margin: 20px 0;
}
.note div p{
font-size: 13px;
color: #333;
}
/*停诊信息*/
.content .information{display: none;}
.content .information > h3{
text-align: center;
margin: 20px 0;
}
.content .information > table{
text-align: center;
margin: 0 auto;
border-collapse: collapse;
font-size: 14px;
color: #555;
margin-bottom: 30px;
}
.content .information > table tr td{
border: 1px solid #bebebe;
height: 25px;
}
.information > table tr td:nth-child(1){
width: 110px;
}
.information > table tr td:nth-child(2),
.information > table tr td:nth-child(3),
.information > table tr td:nth-child(5){
width: 50px;
}
.information > table tr td:nth-child(4),
.information > table tr td:nth-child(6){
width: 220px;
}
.information > table tr td:nth-child(7){
width: 70px;
}
.information > table tr td:nth-child(8),
.information > table tr td:nth-child(9),
.information > table tr td:nth-child(10){
width: 70px;
}
/*查询取消页*/
.content .enquiry{
display: none;
width: 100%;
height: 200px;
border-top: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
margin: 50px 0 30px 0;
}
.enquiry div{
text-align: center;
line-height: 200px;
}
.enquiry input{
border: 1px solid rgb(192, 192, 192);
height: 22px;
color: #666;
}
.enquiry button{
background-color: #5bb8eb;
border: none;
height: 22px;
color: #fff;
width: 80px;
outline: none;
cursor: pointer;
}
.enquiry button:hover{
color: #fff;
}
/*页脚*/
.footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
.ui-search-select{
color: #fff;
width: 50px;
height: 38px;
line-height: 38px;
text-align: center;
display: inline-block;
}
.search-select-list{
position: absolute;
top:38px;
z-index: 99;
display: none;
}
.search-select-list a{
display: block;
color: #666;
height: 35px;
width: 67px;
line-height: 35px;
text-align: center;
background-color: #fff;
cursor: pointer;
z-index: 2;
}
.search-select-list a:hover{
background-color:#ebeef5;
}
.search-content{
display: inline-block;
font-size: 14px;
left: 72px;
color: #666;
height: 36px;
line-height: 36px;
position: absolute;
top: 1px;
}
.search-submit{
float: right;
height: 38px;
width: 38px;
}
js.js
// 定义search
$.fn.UiSearch=function (){
// body...
var search=$(this);
$('.ui-search-select',search).on('click',function(){
$('.search-select-list').show();
return false;
});
$('.search-select-list a',search).on('click',function(){
$('.ui-search-select').text($(this).text());
$('.search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.search-select-list').hide();
return false;
});
}
// 定义switchingMenu
/**
* @param {string} header TAB组件，的所有选项卡 item
* @param {string} content TAB组件，内容区域，所有 item
*/
$.fn.switchingMenu = function(header,content){
var menu=$(this),f
tabs=$(header,menu),
cons=$(content,menu);
$('.menu',menu).on('click',function(){
var index=$(this).index();
console.log(index);
tabs.removeClass('focus').eq(index).addClass('focus');
cons.hide().eq(index).show();
})
}
// 定义排班
$.fn.schedual=function(){
var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
// 清空容器内容
$('#schedule_box_wrap').empty();
// 设置一页显示天数
var pageCount=7,
// 一共循环7周的排班表
days=pageCount*7,
// 获取当前日期
date=new Date(),
time=date.getTime();
// 遍历并设置排班表
for(var i=0;i<days;i++){
var timePlus=time+i*86400*1000;
var dataPlus=new Date(timePlus);
var html=[];
var w=week[dataPlus.getDay()];
var y=dataPlus.getFullYear();
var m=dataPlus.getMonth()+1;
m=m<10 ? '0'+m :m;
var d=dataPlus.getDate();
d=d < 10 ? '0'+d :d;
console.log(w+'<br>'+y+'-'+m+'-'+d);
html.push('<div class="schedule_box_item"><div class="date"'+w+'<br>'+y+'-'+m+'-'+d+'<div>');
console.log(html)
// 上午
html.push('<div class="appointment-time-con"></div>');
// 下午
html.push('<div class="appointment-time-con full"></div>');
// 晚上
html.push('<div class="appointment-time-con"></div>');
$().append();
}
// 设置当前页面页数为0，一页存放一周。currentPage当前页面的周数。
var currentPage=0,
width=$('.schedule_box').width();
// 绑定移动事件
$('#schedule_box_wrap').on('divMove',function(){
$(this).css('left',-(width*currentPage));
});
// 上一周
$('#prv').on('click',function(){
if(currentPage!=0){
currentPage-=1
$('#schedule_box_wrap').triggerHandler('divMove')
}
return false;
});
// 下一周
$('#next').on('click',function(){
if(currentPage+1<pageCount){
currentPage+=1
$('#schedule_box_wrap').triggerHandler('divMove')
}
return false;
});
}
//页面的脚本逻辑
$(function () {
// 调用UiSearch方法后点击超链接无法跳转
$('.search').UiSearch();
$('.content').switchingMenu('.reservation-menu > .menu','.wrap > div');
$(window).schedual();
});
12
收起
正在回答
1回答
同学你好，问题解答如下：
1.排班表没有渲染到schedule_box_wrap中，是因为代码书写不正确，修改如下:
2. 由于UiSearch方法中，body的点击事件中，使用了return false;阻止了默认行为，因此导致点击a链接不再进行跳转。可做如下调整：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星