控制台报错了，帮忙看下
<!DOCTYPE html>
<html>
<head>
<title>城市医院预约平台</title>
<meta charset="utf-8">
<style type="text/css">
/*-------base*/
*{
margin: 0;
padding: 0;
}
body{
min-width: 1000px;
}
select,input{
border: none;
outline: none;
}
.clearfix:after{
content: " ";
display: block;
height:0;
clear: both;
/*zoom属性设置或检索对象的缩放比例,但是在这是为了清除浮动的影响,用于IE浏览器*/
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: 802px;
margin: 0 auto;
height: 414px;
padding: 9px 0 0 198px;
overflow: hidden;
}
.banner-slider{
float: left;
width: 544px;
height: 414px;
background-color: #8edff3;
}
.banner-search{
float: left;
margin-left: 9px;
width: 250px;
height: 255px;
background-color: #eee;
}
.banner-help{
float: left;
margin-left: 9px;
width: 250px;
height: 146px;
background-color: #ccc;
margin-top: 12px;
}
.content{
padding: 10px 0 38px 0;
}
.content-tab{
float: left;
width: 742px;
height: 490px;
background-color: #eee;
}
.content-news,
.content-close{
float: right;
width: 248px;
height: 236px;
border: 1px solid #ccc;
}
.content-close{
margin-top: 12px;
border-color: red;
}
.footer{
height: 70px;
padding: 25px 0;
background-color: #eceef2;
}
/*-------layout*/
/*top样式*/
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(img/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 a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
.nav .menu .menu-list{
background-color: #1fa4f0;
width: 100%;
height: 423px;
position: absolute;
left: 0;
top: 36px;
}
/*banner-search*/
.banner-search{
background-color: #fafafa;
}
.banner-help .caption,
.banner-search .caption{
height: 22px;
padding: 15px 0 15px 0;
text-align: center;
}
.banner-help .caption .text,
.banner-search .caption .text{
display: inline-block;
height: 22px;
line-height: 22px;
/*为图片预留位置*/
padding-left: 28px;
color: #f3c009;
font-size: 16px;
background: url(img/icon-help.png) no-repeat 0 0;
}
.banner-search .form{
height: 150px;
}
.banner-search .form .line{
padding-bottom: 9px;
text-align: center;
}
.banner-search .form .line select{
width: 170px;
font-size: 12px;
z-index: 0;
border: 1px solid #dcdddd;
height: 26px;
line-height: 26px;
padding: 2px 0;
color: #666;
}
.banner-search .submit{
height: 32px;
text-align: center;
}
.banner-search .submit .button{
width: 108px;
height: 33px;
background-color: #fecd09;
font-size: 14px;
color: #fff;
border-radius: 3px;
}
/*banner-help*/
.banner-help{
background-color: #fafafa;
}
.banner-help .caption .text{
color: #00b3ea;
background-position: 0 -23px;
}
.banner-help .link{
color: #00b3ea;
display: inline-block;
width: 86px;
height: 26px;
line-height: 26px;
font-size: 14px;
text-align: center;
padding: 0 8px 0 26px;
}
/*content-news*/
.content-news{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
background-color: #f4f6fa;
text-indent: 20px;
color: #fecd09;
font-size: 15px;
}
.content-close .more,
.content-news .more{
float: right;
padding-right: 22px;
font-size: 12px;
color: #868686;
}
.content-close .list,
.content-news .list{
padding: 15px 20px 13px 35px;
line-height: 29px;
font-size: 12px;
background: url(img/list-yellow.jpg) no-repeat 17px 20px;
}
.content-close .list .link,
.content-news .list .link{
display: block;
color: #969696;
}
.content-close{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption{
color: #4ab4ed;
}
.content-close .list{
background: url(img/list-blue.jpg) no-repeat 17px 20px;
}
/*content-tab*/
.content-tab{
background: none;
}
.content-tab .caption{
height: 34px;
line-height: 34px;
background-color: #f5f6fa;
}
.content-tab .caption .item{
display: block;
width: 112px;
height: 34px;
text-align: center;
float: left;
color: #00b3ea;
}
.content-tab .caption .item_focus{
background-color: #60bff2;
color: #fff;
}
.content-tab .block{
border: 1px solid #f4f6fa;
height: 452px;
}
.content-tab .block-caption{
height: 26px;
line-height: 26px;
padding: 8px;
border-bottom: 1px solid #f4f6fa;
}
.content-tab .block-caption-item{
display: block;
padding: 0 10px 0 10px;
font-size: 12px;
color: #4c4948;
float: left;
}
.content-tab .block-caption-item_focus{
background-color: #60bff2;
color: #fff;
}
.content-tab .block-content{
padding: 16px 12px;
}
.content-tab .block-content .block-more{
display: block;
line-height: 55px;
text-align: center;
color: #5084c4;
font-size: 14px;
}
/*content-tab block-content */
.content-tab .block-content .block-list .item{
float: left;
width: 216px;
height: 102px;
padding: 0 20px 10px 120px;
position: relative;
font-size: 12px;
}
.content-tab .block-content .block-list .item img{
width: 110px;
height: 98px;
position: absolute;
left: 0;
top: 0;
}
.content-tab .block-content .block-list .item-name{
color: #036eb7;
font-size: 14px;
line-height: 21px;
padding-top: 13px;
}
.content-tab .block-content .block-list .item-level{
float: right;
font-size: 12px;
color: #979797;
}
.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{
line-height: 18px;
padding-bottom: 4px;
color: #666;
}
.content-tab .block-content .block-text-list{
}
.content-tab .block-content .block-text-list .item{
display: block;
width: 351px;
height: 27px;
font-size: 14px;
color: #666;
padding-top: 8px;
float: left;
border-bottom: 1px dashed #dcdddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left: 13px;
}
.footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
/*-------ui*/
/*search*/
.search{
background: none;
}
.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: 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-menu-item*/
.ui-menu-item{
height: 22px;
line-height: 22px;
padding: 8px 5px 9px 6px;
margin-left: 2px;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left: 30px;
font-size: 14px;
color: #fff;
}
.ui-menu-item-department:before{
content: "";
display: block;
width: 22px;
height: 21px;
position: absolute;
left: 0;
top: 1px;
background: url(img/icon-menu.jpg) -22px 0 no-repeat;
}
.ui-menu-item-disease{
font-size: 12px;
float: right;
padding-left: 5px;
color: #d7f3ff;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
background-position: -22px -22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
background-position: -22px -44px;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position: 0 0;
}
.ui-menu-item:hover:nth-child(2) .ui-menu-item-department:before{
background-position: 0 -22px;
}
.ui-menu-item:hover:nth-child(3) .ui-menu-item-department:before{
background-position: 0 -44px;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #333;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item-detail{
display: none;
position: absolute;
width: 500px;
height: 392px;
padding: 20px 10px 10px 29px;
background: #fff url(img/bg-menu.jpg) center no-repeat;
top: 0;
left: 190px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1);
z-index: 2;
}
.ui-menu-item-detail-group{
padding-bottom: 20px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
width: 100%;
display: block;
height: 34px;
line-height: 34px;
color: #666;
font-size: 16px;
font-weight: bold;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color: #868686;
margin-right: 12px;
font-size: 12px;
padding-bottom: 5px;
}
.ui-menu-item-detail-group-list a:after{
content: "|";
padding-left: 12px;
color: #ddd;
}
/*ui-backTop*/
.ui-backTop{
display: none;
position: fixed;
right: 2px;
bottom: 2px;
z-index: 9;
width: 40px;
height: 40px;
color: #fff;
background: rgba(155,155,155,.5) url(img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
background: rgba(155,155,155,.5);
}
.ui-backTop:hover:after{
content: "回到顶部";
display: block;
line-height: 20px;
text-align: center;
}
/*幻灯片*/
.ui-slider{
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap{
width: 10000px;
height: 414px;
position: absolute;
left: 0;
right: 0;
transition: all .5s;
}
.ui-slider-wrap .item{
display: block;
float: left;
width: 544px;
height: 414px;
}
.ui-slider-arrow{
width: 544px;
height: 40px;
position: absolute;
margin-top: -20px;
top: 50%;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
background: url(img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
left: 0;
}
.ui-slider-arrow .right{
right: 0;
background-position: -40px 0;
}
.ui-slider-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slider-process .item{
display: inline-block;
width: 16px;
height: 16px;
background: url(img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
background-position: -23px 0;
}
</style>
</head>
<body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="javascript:;">帮助中心</a>
</p>
</div>
</div>
<div id="header" class="header">
<div class="wrap">
<a href="javascript:;" class="logo"><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="javascript:;">科室</a>
<a href="javascript:;">疾病</a>
<a href="javascript:;">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="javascript:;" class="ui-search-submit"> </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="javascript:;" class="ui-menu-item-department">内科</a>
<a href="javascript:;" class="ui-menu-item-disease">高血压</a>
<a href="javascript:;" 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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item">
<a href="javascript:;" class="ui-menu-item-department">外科</a>
<a href="javascript:;" class="ui-menu-item-disease">a疾病</a>
<a href="javascript:;" 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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item">
<a href="javascript:;" class="ui-menu-item-department">内科</a>
<a href="javascript:;" class="ui-menu-item-disease">高血压</a>
<a href="javascript:;" 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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</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="javascript:;">心脑血管科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
<a href="javascript:;">内分泌科</a>
<a href="javascript:;">血液科</a>
<a href="javascript:;">心血管内科</a>
<a href="javascript:;">神经外科</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:;" class="link">按医院挂号</a>
<a href="javascript:;" class="link">按科室挂号</a>
<a href="javascript:;" class="link">按疾病挂号</a>
<a href="javascript:;" class="link">最新公告</a>
<a href="javascript:;" class="link right">社会知名医院</a>
</div>
</div>
<div id="banner" class="banner">
<div class="wrap">
<div class="banner-slider ui-slider">
<div class="ui-slider-wrap">
<a href="javascript:;" class="item"><img src="img/banner_1.jpg"></a>
<a href="javascript:;" class="item"><img src="img/banner_2.jpg"></a>
<a href="javascript:;" class="item"><img src="img/banner_3.jpg"></a>
</div>
<div class="ui-slider-arrow">
<a href="javascript:;" class="item left"> </a>
<a href="javascript:;" class="item right"> </a>
</div>
<div class="ui-slider-process">
<a href="javascript:;" class="item item_focus"> </a>
<a href="javascript:;" class="item item"> </a>
<a href="javascript:;" class="item item"> </a>
</div>
</div>
<div class="banner-search">
<div class="caption">
<span class="text">快速预约</span>
</div>
<div class="form">
<div class="line">
<select name="area">
<option>医院地区</option>
</select>
</div>
<div class="line">
<select name="level">
<option>医院等级</option>
</select>
</div>
<div class="line">
<select name="name">
<option>医院名称</option>
</select>
</div>
<div class="line">
<select name="department">
<option>医院科室</option>
</select>
</div>
</div>
<div class="submit">
<input type="button" class="button" value="快速查询" name="">
</div>
</div>
<div class="banner-help">
<div class="caption">
<span class="text">帮助中心</span>
</div>
<div class="list">
<a href="javascript:;" class="link">账号指南</a>
<a href="javascript:;" class="link">预约指南</a>
<a href="javascript:;" class="link">账号找回</a>
<a href="javascript:;" class="link">常见问题</a>
</div>
</div>
</div>
</div>
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab">
<div class="caption">
<a href="javascript:;" class="item item_focus">医院</a>
<a href="javascript:;" class="item">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="javascript:;" class="block-caption-item block-caption-item_focus">全部</a>
<a href="javascript:;" class="block-caption-item">东城区</a>
<a href="javascript:;" class="block-caption-item">西城区</a>
<a href="javascript:;" class="block-caption-item">朝阳区</a>
<a href="javascript:;" class="block-caption-item">丰台区</a>
<a href="javascript:;" class="block-caption-item">石景山区</a>
<a href="javascript:;" class="block-caption-item">海淀区</a>
<a href="javascript:;" class="block-caption-item">门头沟区</a>
<a href="javascript:;" class="block-caption-item">房山区</a>
<a href="javascript:;" 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="医院">
<div class="item-name">北京协和医院
<span class="item-level">【三级甲等】</span>
</div>
<div class="item-phone">
电话：东院咨询台：010-567567567
</div>
<div class="item-address">[东院]北京市东城区帅府园一号[东院]北京市东城区帅府园一号</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="医院">
<div class="item-name">北京协和医院
<span class="item-level">【三级甲等】</span>
</div>
<div class="item-phone">
电话：东院咨询台：010-567567567
</div>
<div class="item-address">[东院]北京市东城区帅府园一号[东院]北京市东城区帅府园一号</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="医院">
<div class="item-name">北京协和医院
<span class="item-level">【三级甲等】</span>
</div>
<div class="item-phone">
电话：东院咨询台：010-567567567
</div>
<div class="item-address">[东院]北京市东城区帅府园一号[东院]北京市东城区帅府园一号</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="医院">
<div class="item-name">北京协和医院
<span class="item-level">【三级甲等】</span>
</div>
<div class="item-phone">
电话：东院咨询台：010-567567567
</div>
<div class="item-address">[东院]北京市东城区帅府园一号[东院]北京市东城区帅府园一号</div>
</div>
</div>
</div>
<div class="block-wrap" style="display: none;">其他城区内容</div>
<div class="block-text-list clearfix">
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
<a href="javascript:;" class="item">首都儿科医院研究所附属儿童医院
<span class="level">【三级甲等】</span>
</a>
</div>
<a class="block-more">更多医院</a>
</div>
</div>
<div class="item" style="display: none;">
科室内容
</div>
</div>
</div>
<div class="content-news">
<div class="caption">最新公告
<a href="javascript:;" class="more">| 更多</a>
</div>
<div class="list">
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
<a href="javascript:;" class="link">防护策略升级通知防护策略升级通知</a>
</div>
</div>
<div class="content-close">
<div class="caption">停诊公告
<a href="javascript:;" class="more">| 更多</a>
</div>
<div class="list">
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
<a href="javascript:;" class="link">首都医科大学附属北京医院</a>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Copyright©2017慕课网版权所有
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//ui-search 定义
$.fn.uiSearch=function(){
var ui=$(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
//
// 要理解return false的作用是阻止事件冒泡。
// 加不加的区别就是： 加了可以阻止事件冒泡，不加就不能阻止。
// 同学的截图的代码这里是必须要添加的， 因为点击ui-search-selected元素，子菜单会显示。但是事件会冒泡，在body上也绑定了点击事件，将子菜单隐藏了，所以如果不阻止冒泡的话，子菜单显示然后隐藏，最终效果就是隐藏的。
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();
})
}
// header tab组件的所有选项卡item
// content tab组件的内容区域所有选项卡item
// focus_prefix 选项卡高亮样式前缀
$.fn.uiTab=function(header,content,focus_prefix){
var ui=$(this);
var tabs=$(header,ui);
var cons=$(content,ui);
var focus_prefix=focus_prefix||'';
tabs.on('click',function(){
var index=$(this).index();
tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus')
cons.hide().eq(index).show();
return false;
})
}
$.fn.uiBackTop=function(){
var ui=$(this);
var el=$('<a href="javascript:;" class="ui-backTop"></a>')
ui.append(el);
var windowHeight=$(window).height();
$(window).on('scroll',function(){
var top=$('body').scrollTop()||$(document).scrollTop();
// console.log(top)
console.log(windowHeight)
if(top>500){
el.show();
console.log("1")
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0)
})
}
$.fn.uiSlider=function(){
var ui=$(this);
var wrap=$('.ui-slider-wrap')
var btn_prev=$('.ui-slider-arrow .left',ui)
var btn_next=$('.ui-slider-arrow .right',ui)
var items=$('.ui-slider-wrap .item',ui)
var tips=$('.ui-slider-process .item',ui)
var current=0;
var size=items.size();
var width=items.eq(0).width();
wrap
.on('move_prev',function(){
})
.on('move_next',function(){
})
.on('move_to',function(evt,index){
wrap.css('left',index*width*-1)
})
btn_prev.on('click',function(){
wrap.triggerHandler("move_prev")
});
btn_next.on('click',function(){
wrap.triggerHandler("move_next")
});
tips.on('click',function(){
var index=$(this).index()
wrap.triggerHandler("move_to")
});
}
//页面脚本逻辑
$(document).ready(function(){
$('.ui-search').uiSearch();
$('.content-tab').uiTab('.caption>.item',".block>.item")
$('.content-tab .block .item').uiTab('.block-caption> a','.block-content>.block-wrap','block-caption-')
$('body').uiBackTop();
$('.ui-slider').uiSlider();
})
</script>
</body>
</html>
正在回答
同学你好，无法切换与length没有关系，是因为忘记传递索引了。如下添加：
另外，点击圆点时，圆点的样式也需要切换：
点击上一张下一张也是因为没有传递索引值，例如点击上一张的时候，应该让索引减去1。并在触发自定义事件时，传递过去。这个课程中都有讲解的，建议同学再去复习一下课程内容，听课是要细心认真一点，然后跟着老师的思路一步一步的去做，不然课程的知识就没有办法学好哦。
祝学习愉快 ~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星