点击医院 和科室那一块内容的时候没有切换效果，检查不出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>城市医院预约平台</title> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="ui.css"> <script type="text/javascript" src = "jquery-1.7.1.min.js"></script> </head> <body> <!--顶部部分--> <div class="top" id="top"> <div class="wrap"> <p class="call">01dfdsfdgfd</p> <p class="welcome">cvsdglkdjfgdsjflfsgjs;ldf 请 <a href="#">登录</a> <a href="#">注册</a> <a href="#">skadhfjahsldfk</a> </p> </div> </div> <!--头部部分--> <div id="header" class="header"> <div class="wrap clearfix"> <a class="logo" href="#"><img src="img/logo.png" alt=""></a> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-selected-list"> <a href="#">科室</a> <a href="#">yifkd</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 class="nav" id="nav"> <!-- 为了使中间的内容对齐--> <div class="wrap"> <div class="link menu">全部科室 <div class="menu-list ui-menu"> <div class="ui-menu-item"> <a href="#" class="ui-menu-item-department">内科</a> <a href="#" class="ui-menu-item-disease">高血压</a> <a href="#" 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="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="#" class="ui-menu-item-department">内科</a> <a href="#" class="ui-menu-item-disease">高血压</a> <a href="#" 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="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</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="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="#" class="ui-menu-item-department">内科</a> <a href="#" class="ui-menu-item-disease">高血压</a> <a href="#" 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="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</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="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> <a href="#">心脑血管科</a> </div> </div> </div> </div> </div> </div> <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> <!-- banner部分--> <div class="banner" id="banner"> <div class="banner-slider"></div> <div class="banner-search"> <div class="caption"><span class="text ">快速预约</span></div> <div class="form"> <div class="line"> <select name="area" id="area"> <option>医院地区</option> </select> </div> <div class="line"> <select name="level" id="level"> <option >医院等级</option> </select> </div> <div class="line"> <select name="name" id="name"> <option >医院名称</option> </select> </div> <div class="line"> <select name="department" id="department"> <option >医院科室</option> </select> </div> </div> <div class="submit"> <input type="button" class="button" value="快速查询"> </div> </div> <div class="banner-help"> <div class="caption"><span class="text ">快速预约</span></div> <div class="list"> <a href="#" class="link">账号指南</a> <a href="#" class="link">预约指南</a> <a href="#" class="link">账号找回</a> <a href="#" class="link">常见问题</a> </div> </div> </div> <!-- 中间内容部分--> <div class="content" id="content"> <div class="wrap clearfix"> <div class="content-tab"> <!-- 内容标题--> <div class="caption"> <a href="#" class="item item_focus">医院</a> <a href="#" class="item ">科室</a> </div> <!-- 主要内容--> <div class="block"> <div class="item"> <!-- 医院部分地址分类--> <div class="block-caption "> <a href="#" class="block-caption-item block-caption-item_focus">全部</a> <a href="#" class="block-caption-item">东城区</a> <a href="#" class="block-caption-item">西城区</a> <a href="#" class="block-caption-item">fdgslkfg</a> <a href="#" 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"> dsjfklsfjkjsdlf </div> <div class="item-address"> fgc.kfjdk.nkgn,dsfg. </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"> dsjfklsfjkjsdlf </div> <div class="item-address"> fgc.kfjdk.nkgn,dsfg. </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"> dsjfklsfjkjsdlf </div> <div class="item-address"> fgc.kfjdk.nkgn,dsfg. </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"> dsjfklsfjkjsdlf </div> <div class="item-address"> fgc.kfjdk.nkgn,dsfg. </div> </div> </div> <!--未展开的医院介绍 --> <!-- 不清除浮动更多医院会浮上来--> <div class="block-text-list clearfix"> <a href="#" class="item">首都儿科研究所属儿童医院 <span class="level">【三级甲等】</span></a> <a href="#" class="item">首都儿科研究所属儿童医院 <span class="level">【三级甲等】</span></a> <a href="#" class="item">首都儿科研究所属儿童医院 <span class="level">【三级甲等】</span></a> <a href="#" class="item">首都儿科研究所属儿童医院 <span class="level">【三级甲等】</span></a> </div> <a href="#" class="block-more">更多医院</a> </div> <div class="block-wrap" style="display: none;"> 其他城区内容 </div> <!-- 医院元素结束--> </div> <!-- 科室内容开始--> <div class="item" style="display: none"> 科室内容 </div> <!-- 主要内容模块结束--> </div> <!-- 内容模块结束--> </div> <!--右上最新公告--> <div class="content-news"> <div class="caption">最新公告<a href="#" class="more">|更多</a> </div> <div class="list"> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> </div> </div> <!-- 右下停诊--> <div class="content-close"> <div class="caption"> 停止公告 <a href="#">|更多</a> </div> <div class="list"> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> <a href="#" class="link">sdfgsdfgsdfgsdf</a> </div> </div> </div> </div> <!-- 页脚部分--> <div class="footer" id="footer"> Copyright © 2017慕课网版权所有 </div> <script type="text/javascript" src="ui.js"></script> </body> </html>
/*搜索*/
.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-selected-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: 1;
}
.ui-search-selected-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-selected-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
left:71px;
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;
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:nth-child(2) .ui-menu-item-department:before{
background-position-y: -22px;
}
.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: -66px;
}
.ui-menu-item-disease{
font-size: 12px;
float: left;
padding-left: 5px;
color: #d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position-x: 0 ;
}
.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: 393px;
padding: 20px 10px 10px 29px;
top: 0;
left: 190px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1);
background:#fff url("img/bg-menu.jpg") center no-repeat;
}
.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:bolder;
}
.ui-menu-item-detail-list{
line-height: 23px;
}
.ui-menu-item-detail-list a{
display: inline-block;
color: #868686;
margin-right:8px ;
font-size: 12px;
padding-bottom: 5px;
}
.ui-menu-item-detail-list a:after{
content: '|';
color: #ddd;
padding-left: 8px;
}/*基本布局*/
body{
margin: 0;
padding: 0;
background-color: #ffff;
}
/*清除浮动，让父亲检测到儿子们的存在*/
.clearfix:after{
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
/*为了让顶部内容居中显示而加的wrap*/
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
background-color: #ffffff;
}
/*顶部部分*/
.top{
height: 30px;
background-color: #ffffff;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 802px;
margin:0 auto;
height: 414px;
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{
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: 12px 0;
background-color: #eceef2;
text-align: center;
color: #666;
line-height: 70px;
}/*首页中基本的页面样式*/
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
select{
border: none;
outline: none;
}
/*top 模块内样式*/
/*后加载覆盖前面layout样式*/
.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 a{
color: #2da5e1;
padding-left: 10px;
}
.top .welcome{
float: right;
}
/*header 模块内样式*/
.header .logo{
width: 402px;
/*92-74=18/2=9*/
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
/*让logo撑开*/
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%;
position: absolute;
height: 423px;
left: 0;
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{
display: inline-block;
height: 22px;
line-height: 22px;
padding-left: 28px;
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 #dccddd;
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: #ffff;
border-radius: 3px;
}
.banner-help{
background-color: #fafafa;
}
.banner-help .caption .text{
color: #00b3ea;
background-position: 0 -22px;
}
.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-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{
padding: 15px 20px 13px 35px;
line-height: 29px;
font-size: 12px;
background: url("img/list-yellow.jpg")17px 20px no-repeat;
}
.content-news .list .link,
.content-close .list .link{
display: block;
color: #969696;
}
.content-close{
background-color: #fff;
border:1px solid #f4f6fa;
}
.content-close .caption{
color: #4ab4ed;
}
.content-news .list{
padding: 15px 20px 13px 35px;
line-height: 29px;
font-size: 12px;
background: url("img/list-blue.jpg") 17px 20px no-repeat;
}
.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;
}
.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;
text-align: center;
line-height: 55px;
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;
left: 0;
top: 0;
}
.content-tab .block-content .block-list .item-name{
color: #036eb7;
font-size:14px ;
line-height: 21px;
padding-top:13px;
padding-bottom: 6px;
}
.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: 6px;
}
/*医院的文案列表 -容器*/
.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 #dccddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left: 13px;
}// ui-search
$.fn.UiSearch = function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function () {
$('.ui-search-selected-list').show();
return false;
});
$('.ui-search-selected-list a',ui).on('click',function () {
$('.ui-search-selected ').text($(this).text());
// $('.ui-search-selected-list').hide();
return false;//防止冒泡
});
$('body').on('click',function () {
$('.ui-search-selected-list').hide();
return false;
});
}
// 页面脚本逻辑
// ui-tab定规
// @param{string} header tab组件的选项卡切换部分classname,里面有若干个，item
//@param{string} content tab组件的内容区域部分classname,里面有若干个item
$.fn.UiTab = function (header,content,focus_prefix1) {
var ui = $(this);
var tabs = $(header,ui);
var cons = $(content,ui);
var focus_prefix = focus_prefix1 || '';
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;
})
}
//页面脚本逻辑
$(function () {
$('.ui-search').UiSearch();
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content >.block-wrap','block-caption-item');
})
点击医院科室没有反应
5
收起
正在回答
1回答
同学你好， 因为你没有传入医院科室的元素，调用UiTab函数哦， 建议修改：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星