老师，为什么显示找不到第一个$呢，未定义(ui.js)\\\\\
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css\index.css">
<link rel="stylesheet" type="text/css" href="css\base.css">
<link rel="stylesheet" type="text/css" href="css\ui.css">
<link rel="stylesheet" type="text/css" href="css\content-left-text.css">
</head>
<body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/1116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台
请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<div id="header" class="header">
<div class="wrap">
<a class="logo" href="#"><img src=".\img\logo.png"></a>
<div class="search ui-search">
<div class="ui-search-selected-list">医院</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="#" 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 right">社会知名医院</a>
</div>
</div>
<div id="banner" class="banner">
<div class="wrap">
<div class="caption">热门科室</div>
<div class="banner-text">
<div class="banner-line1">
<a href="#" class="line1" style="padding: 10px 78px 0 0;">神经外科</a>
<a href="#" class="line1" style="padding: 10px 115px 0 0;">妇科</a>
<a href="#" class="line1" style="padding: 10px 132px 0 0;">产科</a>
<a href="#" class="line1" style="padding: 10px 120px 0 0;">儿科</a>
<a href="#" class="line1" style="padding: 10px 132px 0 0;">骨科</a>
<a href="#" class="line1" >眼科</a>
</div>
<div class="banner-line2">
<a href="#" class="line2">耳鼻喉</a>
<a href="#" class="line2">肿瘤外科</a>
<a href="#" class="line2">肿瘤综合科</a>
<a href="#" class="line2">皮肤美容</a>
<a href="#" class="line2">心理咨询科</a>
<a href="#" class="line2" style="padding-right: 40px;">中医科</a>
<a href="#" style="text-decoration: underline;color: #0000ff;font-size: 12px;">展开全部</a>
</div>
</div>
</div>
</div>
<div id="content" class="content clearfix">
<div class="wrap">
<div class="content-left-list">
<a href="#" class="content-list-diease">内科</a>
<a href="#" class="content-list-diease">外科</a>
<a href="#" class="content-list-diease">妇产科</a>
<a href="#" class="content-list-diease">儿科</a>
<a href="#" class="content-list-diease">儿科</a>
<a href="#" class="content-list-diease">骨外科</a>
<a href="#" class="content-list-diease">眼科</a>
<a href="#" class="content-list-diease">口腔科</a>
<a href="#" class="content-list-diease">耳鼻喉头颈科</a>
<a href="#" class="content-list-diease">肿瘤科</a>
<a href="#" class="content-list-diease">皮肤性病科</a>
<a href="#" class="content-list-diease">男性学科</a>
<a href="#" class="content-list-diease">皮肤美容</a>
<a href="#" class="content-list-diease">烧伤科</a>
<a href="#" class="content-list-diease">精神心理科</a>
<a href="#" class="content-list-diease">中医科</a>
<a href="#" class="content-list-diease">中西医结合科</a>
<a href="#" class="content-list-diease">传染病科</a>
<a href="#" class="content-list-diease">结核病科</a>
<a href="#" class="content-list-diease">介入医学科</a>
<a href="#" class="content-list-diease">康复医学科</a>
<a href="#" class="content-list-diease">运动医学科</a>
<a href="#" class="content-list-diease">麻醉医学科</a>
<a href="#" class="content-list-diease">职业病科</a>
<a href="#" class="content-list-diease">地方病科</a>
<a href="#" class="content-list-diease">营养科</a>
<a href="#" class="content-list-diease">医学影像学</a>
<a href="#" class="content-list-diease">病理科</a>
<a href="#" class="content-list-diease">其他科室</a>
</div>
<div class="content-right-list"></div>
</div>
</div>
<div class="footer" id="footer">
Copyright © 2017慕课网版权所有
</div>
</body>
</html>
css---------------------------------------------------------------------------
.content .content-left-list{
border: 1px solid #dcdddd;
}
.content .content-left-list a{
text-decoration: none;
color: #555555;
display: block;
padding: 12px 0 0 20px;
}
.content .content-left-list a:nth-child(1){
background: url(image/icon-menu.jpg) no-repeat 0px 10px;
}
body{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.clearfix:after{
display: block;
content: "";
height: 0;
line-height: 0;
clear: both;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
.top{
height:30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
height: 152px;
margin: 0 auto;
}
.banner .wrap{
position: relative;
top: 30px;
width: 100%;
height: 102px;
}
.content .content-left-list{
height: 600px;
width: 253px;
position: relative;
top: 80px;
float: left;
}
.content-right-list{
height: 2000px;
width: 710px;
background-color: #f5f5f5;
position: relative;
top: 80px;
float: right;
}
.footer{
height: 100px;
width: 100%;
position: relative;
top: 150px;
color: #acacac;
background-color: #eceef2;
line-height: 100px;
text-align: center;
}
/* UI搜索栏组件 */
.ui-search{
background: url(image/ui-search.jpg);
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected-list{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0px;
text-indent: 14px;
}
.ui-search-select-list{
position: absolute;
width: 67px;
height: 72px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top:36px;
}
.ui-search-select-list a{
display: block;
color: #a5a2a2;
text-align: center;
text-decoration: none;
position: relative;
z-index: 2;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
left: 75px;
top:5px;
line-height: 26px;
font-size: 13px;
color: #a5a2a2;
border: none;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top:1px;
width: 14px;
height: 36px;
}
p{
margin: 0;
padding: 0;
display:inline-block;
}
/* #top模块样式 */
.top {
line-height:30px ;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(image/icon-call.png) no-repeat center left;
}/* 老师，为什么此处用相对路径没有显示并且报错呢？ ↑↑*/
.top .welcome{
float: right;
}
.top a {
color: #2da5e1;
padding-left: 10px;
text-decoration: none;
}
/* header模块样式 */
.header .wrap .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;
}
/* nav模块样式 */
.nav .wrap .link{
color: #fff;
padding-left: 75px;
text-decoration: none;
line-height: 36px;
}
.nav .wrap .right{
float: right;
}
/* banner模块样式 */
.banner{
height: 102px;
width: 1002px;
}
.banner .caption{
background: url(image/bg-department.jpg) no-repeat 0 0;
text-indent: 20px;
color: #fff;
height: 32px;
line-height: 32px;
position: relative;
top: 2px;
}
.banner .banner-text{
border-top: 2px solid #2da5e1;
border-left: .5px solid #dcdddd;
border-right: .5px solid #dcdddd;
border-bottom: .5px solid #dcdddd;
padding: 10px 0 10px 20px;
width: 100%;
height: 70px;
}
.banner .banner-text .banner-line1,.banner .banner-text .banner-line2{
padding-top: 10px;
}
.banner .banner-text .banner-line1 a{
font-size: 14px;
color: #555555;
}
.banner .banner-text .banner-line2 a{
padding: 10px 90px 0 0;
font-size: 14px;
color: #555555;
}
.banner .banner-text .banner-line1 a:hover,
.banner .banner-text .banner-line2 a:hover{
text-decoration: underline;
}
js------------------------------------------------------------------------------
// UI-search定义
$.fn.UiSearch = function(){
var ui = $(this);
$('.ui-search-selected').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();
})
}
// 脚本逻辑
$(function(){
$('.ui-search').UiSearch();
})
正在回答
同学你好，文件名字可以和老师的不一样。老师源码中的名字是和jquery版本有关系。为了更好区分jquery的版本，建议同学和老师的保持一致。
如果还有其他疑问，建议在问答区重新提问，便于后期查找总结
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星