预约挂号切换不了，控制台报错未定义
来源：5-12 项目作业
哎呦啊狗蛋
2019-05-30 11:07:53
<!DOCTYPE html> <html> <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">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> <a href="#">帮助中心</a> </p> </div> </div> <div id="header" class="header"> <div class="wrap clearfix"> <a class="logo" href="index.html"><img src="./图片素材/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"> </a> </div> </div> </div> <div id="nav" class="nav"> <div class="wrap"> <div class="link menu">首页</div> <a href="hospital.html" 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-caption"> <div class="caption-left"> <p> <span>北京协和医院 </span> <span class="second">关注医院</span> </p> </div> <div class="caption-right"> <p> <span>等级 :</span> <span>三级甲等</span> </p> <p> <span>区域 :</span> <span>东城区</span> </p> <p> <span>分类 :</span> <span>中国医科院所属医院</span> </p> </div> </div> <div class="banner-details"> <div class="left-picture"> <img src="./图片素材/hospital-1.jpg"> </div> <div class="mid-details"> <div>[东院]北京市东城区帅府园一号[西园]北京市西城区大木仓胡同41号</div> <div>http：//www.divumch.cn/</div> <div>东院咨询台：010-69155564；西园咨询台：010-69158010</div> <div>东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路</div> <div>口南；1,52,728,802到西单路口西；20,25,37,39，到东单路口东；</div> <div>103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东</div> <div>口；更多乘车路线详见须知</div> </div> <div class="right-address"> <img src="./图片素材/map-1.png"> </div> </div> </div> <div id="content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <div class="content-nav"> <a href="#" class="item item_focus">预约挂号</a> <a href="#" class="item">医院介绍</a> <a href="#" class="item">预约须知</a> <a href="#" class="item">停诊信息</a> <a href="#" class="item">查询须知</a> </div> <div class="content-block"> <div class="item item_focus"> <div class="item-caption">开放预约室</div> <div class="item-content"> <div class='content-department'>2301</div> <div class='department-detail'> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> </div> </div> <div class="item-content"> <div class='content-department'>专科</div> <div class='department-detail'> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> </div> </div> <div class="item-content"> <div class='content-department'>专科</div> <div class='department-detail'> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> </div> </div> <div class="item-content"> <div class='content-department'>专科</div> <div class='department-detail'> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> <p> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> <a href="javascript:;">特殊门诊科</a> </p> </div> </div> </div> <div class="item">这是医院介绍</div> <div class="item">这是预约须知</div> <div class="item">这是停诊信息</div> <div class="item">这是查询须知</div> </div> <div class="content-ruler"> <div class='ruler-caption'> 预约规则<span>（更新时间每日8:30更新）</span> </div> <div class='ruler-text'> <div>预约周期：<div>7天</div></div> <div>放号时间：<div>8:30</div></div> <div>停挂时间:<div>下午14:00停止次日预约挂号（ 周五14:00后停挂至下周一）</div></div> <div>退号时间:<div>就诊前一工作日14:00前取消</div></div> <div>特殊规则:<div>取号地点不同：西院区预约取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号</div></div> </div> </div> </div> </div> </div> <div id="footer" class="footer">Copyright © 2017慕课网版权所有</div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
body{
margin: 0;
padding: 0;
}
.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
.top {
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 950px;
height: 330px;
margin: 0 auto;
background-color: #f7f7f7;
}
.banner-caption{
width: 100%;
height: 79px;
border-bottom: 1px solid #dcdddd;
}
.banner-details{
width: 100%;
height: 250px;
}
.content-nav{
width: 1000px;
height: 29px;
border-bottom: 1px solid #60bff2;
}
.content-block {
width: 710px;
height: 510px;
}
.content-ruler{
width: 275px;
height: 290px;
}
.department .wrap{
width: 1000px;
height: 540px;
}
.footer{
height: 70px;
padding: 25px 0;
background-color: #eceef2;
}p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
}
/* #top 模块内样式 */
.top {
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(../图片素材/icon-call.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2da5e1;
padding-left: 10px;
}
/* #header 模块内样式 */
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
/*background-color: orange;*/
}
/* #nav 模块内样式 */
.nav .link{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .right{
float: right;
}
.nav .link_focus{
color: #fff;
background-color: #1fa4f0;
padding: 0 20px;
}
.nav a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
/*#banner模块内样式*/
.banner-caption{
position: relative;
}
.caption-left{
position: absolute;
top: 40px;
left: 0;
}
.caption-left .second{
font-size: 14px;
color: #f29600;
}
.caption-right{
position: absolute;
top: 40px;
right: 0;
}
.caption-right p{
margin-left: 14px;
}
.caption-right span{
font-size: 14px;
}
.caption-right span:nth-child(odd){
color: #0000ff;
}
.left-picture{
float: left;
width: 200px;
padding-top: 10px;
}
.mid-details{
float: left;
width: 450px;
font-size: 12px;
line-height: 20px;
margin: 10px 0px 60px 30px;
}
.mid-details div{
text-indent: 20px;
}
.mid-details div:nth-child(1){
background:url(../图片素材/icon-web.png)0 0px no-repeat;
}
.mid-details div:nth-child(2){
background:url(../图片素材/icon-web.png)0 -21px no-repeat;
}
.mid-details div:nth-child(3){
background:url(../图片素材/icon-web.png)0 -42px no-repeat;
}
.mid-details div:nth-child(4){
background:url(../图片素材/icon-web.png)0 -63px no-repeat;
}
.right-address{
float: right;
width: 245px;
padding-top: 10px;
}
/* 医院简介样式*/
.content-nav{
width: 1000px;
height: 29px;
border-bottom: 1px solid #60bff2;
}
.content-nav .item{
display: inline-block;
width: 108px;
height: 30px;
line-height: 30px;
text-align: center;
color: #60bff2;
}
.content-nav .item-focus{
background-color: #60bff2;
color: #ffffff;
}
.content-block .item-caption{
width: 680px;
height: 45px;
line-height: 45px;
background-color: #f4f6fa;
margin-top: 20px;
padding-left: 30px;
font-size:
}
.content-block .item-content .content-department{
float: left;
width: 143px;
height: 90px;
text-align: center;
background-color: #f2fbff;
}
.content-block .item-content .department-detail{
float: right;
width: 564px;
height: 90px;
background-color: #ffffff;
}
.content-block .item-content .department-detail a{
line-height: 30px;
padding:0 20px;
color: #4c4948;
}
.content .wrap{
position: relative;
}
.content-ruler{
position: absolute;
top: 50px;
right:0;
border:1px solid #f4f6fa;
}
.content-ruler .ruler-caption{
padding-left: 10px;
background-color: #f4f6fa;
height: 45px;
line-height: 45px;
}
.content-ruler .ruler-caption span{
color:#00b3ea;
font-size: 12px;
}
.content-ruler .ruler-text{
height:240px;
overflow: auto;
}
.content-ruler .ruler-text>div{
margin:10px;
font-size: 14px;
position: relative;
}
.content-ruler .ruler-text>div>div{
width:170px;
color:#888;
margin:-20px 0 0 65px;
}
.footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
/*分页值班室样式*/
.department .wrap .department-caption{
width: 1000px;
height: 38px;
}
.department .wrap .department-caption a{
margin-left: 20px;
font-size: 14px;
color: #00b3ec;
}
.department .wrap .department-table{
width: 730px;
height: 325px;
}
.department-table .table-left,.table-right{
width: 35px;
height: 325px;
float: left;
}
.department-table .table-left a{
display: block;
width: 35px;
height: 45px;
background: url(../图片素材/icon-scheduling-left.jpg) no-repeat;
border: 1px solid #dcdddd;
border-bottom: none;
text-decoration: none;
}
.department-table .table-right a{
display: block;
width: 35px;
height: 45px;
background: url(../图片素材/icon-scheduling-right.jpg) no-repeat;
border: 1px solid #dcdddd;
border-bottom: none;
text-decoration: none;
}
.department-table .table-right p{
width: 35px;
height: 270px;
background-color: #f2f8ff;
border: 1px solid #dcdddd;
border-top: none;
}
.department-table .table-left p{
width: 35px;
height: 90px;
line-height: 90px;
border-left: 1px solid #dcdddd;
border-right: 1px solid #dcdddd;
background-color: #f2f8ff;
}
.department-table .table-left :last-child{
border-bottom: 1px solid #dcdddd;
}
.department-table .table-mid{
width: 660px;
height: 325px;
float: left;
}
.department-table .table-mid td{
display: inline-block;
width: 90px;
height: 90px;
}
.department-table .table-mid .row1 td{
height: 45px;
color: #868686;
font-size: 12px;
text-align: center;
}
.department-table .table-mid .row3 td{
display: inline-block;
background-color: #e0eefd;
line-height: 90px;
text-align: center;
}
.department-ruler{
position: absolute;
top: 40px;
right:0;
border:1px solid #f4f6fa;
}
.department-ruler .ruler-caption{
padding-left: 12px;
height: 45px;
line-height: 45px;
}
.department-ruler .ruler-caption span{
color:#00b3ea;
font-size: 12px;
}
.department-ruler .ruler-text{
height:240px;
overflow: auto;
}
.department-ruler .ruler-text>div{
margin:10px;
font-size: 14px;
position: relative;
}
.department-ruler .ruler-text>div>div{
width:170px;
color:#888;
margin:-20px 0 0 65px;
}
.department-bottom{
width: 1000px;
height: 65px;
line-height: 65px;
text-align: center;
background-color: #ffffff;
color: #9f9f9f;
border: 1px solid #9f9f9f;
}/* 搜索 */
.ui-search{
background: url(../图片素材/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: 5px;
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.UiSearh = 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();
})
}
// ui-table
$.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').UiSearh();
$('.content-tab').UiTab('.content-nav>item','.content-block>item')
});写回答
1回答
-
好帮手慕星星
2019-05-30
你好，代码中有很多问题，可以参考下面修改后的代码，添加上了注释：
// ui-table $.fn.UiTab = function(header, content) { var ui = $(this); var tabs = $(header, ui); var cons = $(content, ui); // tabs.on('click').function() { //on绑定事件名称和函数都在()中，中间用逗号隔开 tabs.on('click', function() { //jquery中index方法需要添加括号 var index = $(this).index(); tabs.removeClass('item_focus').eq(index).addClass('item_focus'); cons.hide().eq(index).show(); return false; }) } // 页面的脚本逻辑 $(function() { $('.ui-search').UiSearh(); //item是class类，前面需要加点 $('.content-tab').UiTab('.content-nav>.item', '.content-block>.item') });在html中a标签href属性值为#，点击会链接到当前页面，可以阻止跳转，如下：
自己修改测试下，祝学习愉快！
0
相似问题
控制台报错了，帮忙看下
回答 2
我的程序哪里出错了，提示报错
回答 4