实在解决不了换了好几个jquery的版本

index.html

<!DOCTYPE html>

<head>

<title>挂号平台首页</title>

</head>

<body>

<p class="welcome">欢迎来到城市医院预约挂号统一平台 

请 

</p>

</div>

</div>

</div>

<div class="link menu">全部科室

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

内科常见疾病

</div>

<a href="#1">心脑血管科</a>

<a href="#1">心血管内科</a>

<a href="#1">心血管内科</a>

</div>

<a href="#" class="link">按医院挂号</a>

<a href="#" class="link">按科室挂号</a>

<a href="#" class="link">按疾病挂号</a>

<a href="#" class="link right">社会知名医院</a>

</div>

</div>

</div>

</div>

</select></div>

</select></div>

</select></div>

</select></div>

</div>

</div>

</div>

</div>

</div>

<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-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564...</div>

<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

</div>

<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-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564...</div>

<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

</div>

<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

</div>

</div>

<div class="block-wrap" style="display: none;">东城区内容</div>

<div class="block-wrap" style="display: none;">西城区内容</div>

<div class="block-wrap" style="display: none;">朝阳区内容</div>

<div class="block-wrap" style="display: none;">丰台区内容</div>

<div class="block-wrap" style="display: none;">石景山区内容</div>

<div class="block-wrap" style="display: none;">海淀区内容</div>

<div class="block-wrap" style="display: none;">东城区内容</div>

<div class="block-wrap" style="display: none;">门头沟区内容</div>

<div class="block-wrap" style="display: none;">房山区内容</div>

<div class="block-wrap" style="display: none;">其他城区内容</div>

</div>

</div>

<a href="#9" class="link"> 防护策略升级通知...</a>

</div>

<a href="#9" class="link"> 防护策略升级通知...</a>

</div>

</div>

</body>

</html>

ui.js

// ui-search定义

$.fn.uiSearch = function () {

var ui = $(this); //this代表.ui-search

$(".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());//this 代表当前选中的a标签

$(".ui-search-select-list").hide();//选择后隐藏该列表

return false; //阻止事件冒泡

});

$("body").on("click", function () {

$(".ui-search-select-list").hide();

});

}

//ui-tab 选项卡

/**

* @param{string} header TAB组件，的所有选项卡 item

* @param {string} content TAB组件，内容区域，所有 item

* @param {string} 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();//index 表示点中的是第几个 caption下的那个

tabs.removeClass(focus_prefix+"item_focus").eq(index).addClass(focus_prefix+"item_focus"); //点击哪一个选项卡哪一个的item_focus高亮且取消默认的

cons.hide().eq(index).show();

return false;

});

}

// ui-backTop 回到顶部

$.fn.UiBackTop=function(){

var ui = $(this);

var el=$("<a class='ui-backTop' href='#0'></a>");

ui.append(el);//在bod后追加一个a标签

var windowHeight=$(window).height();

$(window).on("scroll",function(){

var top=$("html,body").scrollTop();// 获取滚动的高度

if(top>windowHeight){

el.show();

}else{

el.hide();

}

});

el.on("click",function(){

$(window).scrollTop(0);

})

}

// ui-slider

// 1. 左右箭头需要能控制翻页

// 2. 翻页的时候，进度点，要联动进行focus

// 3. 翻到第三页的时候，下一页需要回到第一页，翻到第一页的时候，同理

// 4. 进度点，在点击的时候，需要切换到对应的页面

// 5. 没有（进度点点击、翻页操作）的时候需要进行自动滚动

// 6. 滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击）

// 7. 高级-无缝滚动

$.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(); //item个数

var size = items.length;

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);

// tips.removeClass('item_focus').eq(index).addClass('item_focus');

})

// 事件

btn_prev.on('click',function(){

wrap.triggerHandler('move_prev',index);

});

btn_next.on('click',function(){

wrap.triggerHandler('move_next',index);

});

tips.on('click',function(){

var index = $(this).index();

// current = index;

wrap.triggerHandler('move_to',index);

})

}

//页面的脚本逻辑

$(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();

});

ui.css

/* 搜索 */

.ui-search{

background: url("../img/ui-search.jpg") no-repeat center;

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: 1px;

top: 38px;

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{

position: absolute;

width: 216px;

height: 36px;

left: 68px;

top: 0px;

line-height: 36px;

font-size: 13px;

color: #A5A2A2;

border: 1px solid orange;

text-indent: 15px;

}

.ui-search-submit{

width: 40px;

height: 38px;

display: block;

position: absolute;

right: 0;

top: 1px;

}

/* ui-menu 分类菜单*/

.ui-menu{

}

.ui-menu-item{

height: 22px;

line-height: 22px;

padding: 8px 5px 9px 6px;

margin-left: 0px;

}

.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-disease{

float: right;

height: 22px;

line-height: 22px;

position: relative;

padding-left: 5px;

font-size: 12px;

color: #d7f3ff;

}

.ui-menu-item:hover .ui-menu-item-department{

color: #333;

}

.ui-menu-item-department:before{

content: " ";

display: block;

width: 22px;

height: 21px;

position: absolute;

left: 0px;

top:1px;

background: url("../img/icon-menu.jpg") no-repeat -22px 0 ;

}

.ui-menu-item:hover .ui-menu-item-department:before{

background-position: 0 0;

/* background-position-x: 0 ; */

}

.ui-menu-item:nth-child(2) .ui-menu-item-department::before{

background-position-y:-22px;

}

.ui-menu-item:nth-child(3) .ui-menu-item-department::before{

background-position-y:-44px;

}

.ui-menu-item:nth-child(4) .ui-menu-item-department::before{

background-position-y:-66px;

}

.ui-menu-item:nth-child(5) .ui-menu-item-department::before{

background-position-y:-88px;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}

.ui-menu-item:hover .ui-menu-item-disease{

color: #868686;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}

.ui-menu-item-detail{

position: absolute;

display: none;

width: 500px;

height: 393px;

padding: 20px 10px 10px 29px;

background:#fff;

background: url("../img/bg-menu.jpg");

top: 0px;

left: 190px;

box-shadow: 5px 5px 3px rgba(0,0,0,.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: 8px;

font-size: 12px;

padding-bottom: 5px;

}

.ui-menu-item-detail-group-list a:after{

content: "|";

color: #ddd;

padding-left: 8px;

}

/* 回到顶部 */

.ui-backTop{

display: block;

position: fixed;

right: 2px;

bottom: 2px;

z-index: 9;

width: 40px;

height: 40px;

color: #fff;

background: rgba(102,102,102,.9) url("../img/icon-go-up.png") center no-repeat;

}

.ui-backTop:hover{

background: rgba(102,102,102,.9);

}

.ui-backTop:hover:after{

content: "回到顶部";

display: block;

line-height: 20px;

text-align: center;

}

/* ui-slider幻灯片 */

.ui-slider{

width: 544px;

height: 414px;

position: relative;

overflow: hidden;

}

.ui-slider-wrap{

width: 9999px;

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{

position: absolute;

width: 544px;

height: 40px;

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: 0px;

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;

}

layout.css

* {

padding: 0;

margin: 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;

background-color: #fff;

}

.nav {

background-color: #60bff2;

height: 36px;

}

.banner {

width: 802px;

height: 414px;

margin: 0 auto;

padding: 9px 0 0 198px;

}

.banner-slider {

float: left;

width: 544px;

height: 414px;

background-color: #8edff3;

}

.banner-search {

float: right;

width: 250px;

height: 255px;

background-color: #eee;

}

.banner-help {

float: right;

width: 250px;

height: 146px;

background-color: #ccc;

margin-top: 12px;

}

.content {

width: 1000px;

margin: 0 auto;

padding: 10px 0 38px 0;

}

.content-tab {

float: left;

height: 490px;

width: 742px;

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;

}

base.css

* {

text-decoration: none;

}

p {

padding: 0;

margin: 0;

display: inline-block;

}

/* top 内样式*/

.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 .serach{

width: 326px;

height: 38px;

position: absolute;

top: 29px;

right: 0px;

}

/* nav */

.nav .link{

display: inline-block;

float: left;

padding-left: 30px;

line-height: 36px;

color: #fff;

font-size: 16px;

text-align: center;

}

.nav a:hover{

color: #d7f3ff;

}

.nav .menu{

width: 130px;

padding-right:30px ;

position: relative;

background-color: #1fa4f0;

}

.nav .menu .menu-list{

background: #1fa4f0;

width: 100%;

height: 423px;

position: absolute;

left: 0px;

top:36px;

}

/* banner */

.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{

/* span *行内*/

display: inline-block;

height: 22px;

line-height: 22px;

padding-left: 28px;

color: #fec009;

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: 33px;

text-align: center;

}

.banner-search .submit .button{

width: 108px;

height: 32px;

background-color: #fecd09;

font-size: 14px;

color: #fff;

border-radius: 8px;

border: 1px #fecd09 solid;

}

.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 0 8px 26px;

}

/* content */

.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: #fec009;

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: inline-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{

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: #606ff2;

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: #60bff2;

color: #fff;

}

.content-tab .block-content{

padding: 16px 12px;

}

.content-tab .block-content .block-more{

display: block;

height: 55px;

line-height: 55px;

text-align: center;

color: #5084c4;

font-size: 14px;

}

/* 医院列表容器 */

.content-tab .block-content .block-list{}

.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;

top: 0px;

left: 0px;

}

.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;

border-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;

border-bottom: 1px dashed #dcdddd;

float: left;

}

.content-tab .block-content .block-text-list .item .level{

float: right;

font-size: 12px;

}

.content-tab .block-content .block-text-list .item:nth-child(2n){

margin-left: 13px;

}

/* footer */

.footer{

line-height: 70px;

text-align: center;

font-size: 12px;

color: #666;

}

慕标5156652 2020-07-17

源自：实战：挂号平台首页 5-7 首页.UI组件-UiSlider（2）

收起

2回答

好帮手慕夭夭 2020-07-17 17:00:24

同学你好，因为有的浏览器使用$("body").scrollTop();无法获取高度，所以要使用$("html,body").scrollTop()这种兼容性写法才可以哦。

祝学习愉快~

收起回答

好帮手慕夭夭 2020-07-17 10:29:45

同学你好，这里并不是jQuery版本的问题，是代码有错误，如下：

这里报错说 wrap.on不是一个函数，正常来说，一个jQuery对象是可以调用on方法的。

所以这里老师猜测，是不是wrap有问题，console.log(wrap)输出了一下，发现确实有问题。输出的不是一个jQuery对象，而是一个类名：

这说明获取jQuery对象时有问题，检查一下，发现少了一个$:

参考如下添加：

遇到问题，可以像老师上面的教你的思路排查一下，这样会提升自身的能力。加油！

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕标5156652 #1

老师我还有一个问题 ui.js部分 // ui-backTop 回到顶部 $.fn.UiBackTop=function(){ var ui = $(this); var el=$("<a class='ui-backTop' href='#0'></a>"); ui.append(el);//在bod后追加一个a标签 var windowHeight=$(window).height(); $(window).on("scroll",function(){ var top=$("body").scrollTop();// 获取滚动的高度 if(top>windowHeight){ el.show(); }else{ el.hide(); } }); el.on("click",function(){ $(window).scrollTop(0); }) } 就是在写回到顶部的时候 ui.js var top=$("body").scrollTop();// 获取滚动的高度这样以后只要我滚动那个回到顶部就会消失然后不论怎么滚动都不会出现 “回到顶部”这个字样如果这样写就会出现效果var top=$("html,body").scrollTop();// 获取滚动的高度这个html在这里起一个什么样的作用有点疑惑就会出现效果这个是什么原因呢

2020-07-17 14:16:30