预约挂号侧导航和城区切换不了

首页课程实战体系课手记专栏慕课教程

预约挂号侧导航和城区切换不了

来源：2-1 input新增类型（email_url_tel_number）

慕斯卡9565767

2019-03-31 18:00:50

html 代码

<!DOCTYPE html>

<html>

<head>

<title>城市医院预约平台</title>

</head>

<body>

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

</p>

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

<a href="#1" class="ui-menu-item-disease">腰间盘突出</a>

</div>

</div>

</div>

<a href="#1" class="ui-menu-item-departement">耳鼻咽喉头颈科</a>

</div>

</div>

<a href="#1" class="ui-menu-item-departement">皮肤性病科</a>

</div>

</div>

内科

</div>

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

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

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

<a href="#">内分泌内科</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>

</div>

</div>

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

<div class="item-phone">电话：医院总机查号台：69156114</div>

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

</div>

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

<div class="item-phone">电话:医院总机查号台：69156114</div>

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

</div>

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

<div class="item-phone">电话:医院总机查号台：69156114</div>

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

</div>

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

<div class="item-phone">电话:医院总机查号台：69156114</div>

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

</div>

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

<a href="#" class="item">首都医科大学附属北京天坛医<span class="level">【三级甲等】</span></a>

<a href="#" class="item">首都医科大学宣武医院<span class="level">【三级甲等】</span></a>

</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">清华大学医院寒假暂停更新号源通...</a>

<a href="#" class="link">北京肿瘤医院部分科室医生门诊医...</a>

</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">解放军第302医院中西医结合科...</a>

<a href="#" class="link">首都医科大学宣武医院呼吸科门诊...</a>

</div>

</div>

</body>

</html>

css代码

.wrap{

width:1000px;

margin: 0 auto;

position: relative;

}

.top{

line-height:30px;

height:30px;

font-size:13px;

color: #868686;

background-color:#f5f5f5;

}

.top p{display:inline-block;}

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

}

/*herder模块内样式*/

.header{

height:92px;

}

.header .logo{

width:405px;

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{

height: 36px;

background-color: #60bff2;

}

.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: 429px;

position: absolute;

left: 0;

top: 36px;

}

/*导航完毕*/

.banner{

width: 802px;

margin: 0 auto;

height: 414px;

padding: 9px 0 0 198px;

}

.banner .banner-slider{

float:left;

width: 544px;

height: 414px;

background-color: #8edff3;

}

.banner .banner-search{

width:250px;

float:right;

height:255px;

background-color:#fafafa;

}

/*这里帮助中心复用了快速的样式*/

.banner .banner-help .caption,

.banner .banner-search .caption{

height: 22px;

padding: 15px 0 15px 0;

text-align: center;

}

.banner .banner-help .caption .text,

.banner .banner-search .caption .text{

display: inline-block;

height: 22px;

line-height: 22px;

padding-left: 28px;

color: #fec009;

font-size: 16px;

background: url(../image/icon-help.png) no-repeat 0 0;

}

/*这里帮助中心复用了快速的样式*/

.banner .banner-search .form{

height: 150px;

}

.banner .banner-search .form .line{

padding-bottom: 9px;

text-align: center;

}

.banner .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 .banner-search .submit{

height: 32px;

text-align: center;

}

.banner .banner-search .submit .button{

width: 108px;

height: 33px;

background-color: #fecd09;

font-size: 14px;

color: #fff;

border-radius: 3px;

}

/*预约css结束*/

.banner .banner-help{

background-color: #fafafa;

}

.banner .banner-help .caption .text{

color: #00b3ea;

background-position:0 -23px;

}

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

}

/*帮助中心结束*/

.banner .banner-help{

float:right;

width: 250px;

height: 146px;

background-color: #eee;

margin-top: 12px;

}

/*#content 模块样式*/

.content{

padding: 10px 0 38px 0;

}

.content .content-tab{

float: left;

width: 742px;

height: 490px;

}

/*内容*/

.content .content-tab .caption{

height: 34px;

line-height: 34px;

background-color: #f5f6fa;

}

.content .content-tab .caption .item{

display: block;

width: 112px;

height: 34px;

text-align: center;

float: left;

color: #00b3ea;

}

.content .content-tab .caption .item_focus{

background-color:#60bff2;

color:#fff;

}

/*导航完毕*/

.content .content-tab .block{

border: 1px solid #f4f6fa;

height: 452px;

}

.content .content-tab .block-caption{

height: 26px;

padding: 8px;

line-height: 26px;

border-bottom: 1px solid #f4f6fa;

}

.content .content-tab .block-caption-item{

display: block;

padding: 0 10px 0 10px;

font-size: 12px;

color: #4c4948;

float:left;

}

.content .content-tab .block-caption .block-caption-item-focus{

background-color: #60bff2;

color: #fff;

}

.content .content-tab .block-caption{

padding:16px 12px;

}

/*更多块样式*/

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

display: block;

line-height:55px;

text-align:center;

color: #5084c4;

font-size: 14px;

}

/*医院列表 - 容器*/

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

.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 .content-tab .block-content .block-list .item img{

width: 110px;

height: 98px;

position: absolute;

left: 0;

top: 0;

}

.content .content-tab .block-content .block-list .item-name{

color: #036eb7;

font-size: 14px;

line-height: 21px;

padding-top: 12px;

}

.content .content-tab .block-content .block-text-list .level,

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

float:right;

font-size: 12px;

color: #979797;

}

.content .content-tab .block-content .block-list .item-phone,

.content .content-tab .block-content .block-list .item-address{

line-height: 18px;

padding-bottom: 4px;

color: #666;

}

/*医院文案列表 - 容器*/

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

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

display: block;

width: 351px;

height: 27px;

font-size: 14px;

color: #666;

padding-top: 10px;

float: left;

border-bottom: 1px dashed #dcdddd;

}

.content .content-tab .block-content .block-text-list .item:nth-child(2n){/*2n只选择偶数*/

margin-left: 13px;

}

/*内容*/

.content .content-news,

.content-close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content .content-news{

background-color: #fff;

border: 1px solid #f4f6fa;

}

/*公用样式公告*/

.content .content-close .caption,

.content .content-news .caption{

height:38px;

line-height:38px;

background-color:#f4f6fa;

text-indent:20px;

color:#fec009;

font-size:15px;

}

/*公用样式更多*/

.content .content-close .more,

.content .content-news .more{

float:right;

padding-right: 22px;

font-size: 12px;

color: #868686;

}

/*公用样式列表*/

.content .content-close .list,

.content .content-news .list{

padding: 15px 20px 13px 35px;

line-height: 29px;

font-size: 12px;

background: url(../image/list-yellow.jpg) 17px 20px no-repeat;

}

.content .content-close .list .link,

.content .content-news .list .link{

display: block;

color: #969696;

}

.content .content-close{

background-color: #fff;

border: 1px solid #f4f6fa;

}

.content .content-close .caption{

color: #4ab4ed;

}

.content .content-close .list{

background: url(../image/list-blue.jpg) 17px 20px no-repeat;

}

.content .content-close{

margin-top: 12px;

border-color: red

}

/*底部样式*/

.footer{

margin-top: 10px;

height: 70px;

padding: 25px 0;

background-color: #eceef2;

}

.footer{

line-height: 70px;

text-align: center;

font-size: 12px;

color: #666;

}

uicss代码

/*搜索*/

.ui-search{

background: url(../image/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 分类菜单*/

.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 .ui-menu-item-departement{

float: left;

height: 22px;

line-height: 22px;

position: relative;

padding-left: 30px;

font-size: 14px;

color: #fff;

}

.ui-menu-item-departement:before{

content: ' ';

display: block;

width: 22px;

height: 21px;

position: absolute;

left:0;

top: 0;

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

}

.ui-menu-item .ui-menu-item-disease{

font-size: 12px;

float: right;

padding-left: 5px;

color: #d7f3ff;

}

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

background-position: 0 0;

}/*设置内科小iocn背景为透明 */

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

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(../image/bg-menu.jpg) center no-repeat;

top: 0;

left: 190px;

box-shadow: 5px 5px 2px rgba(0,0,0,.1)

}

.ui-menu-item-detail-group{

padding-bottom: 20px;

text-align: left;

}

.ui-menu-item-datail-group-caption{

width: 100%;

display: block;

height: 34px;

line-height: 34px;

color: #666;

font-size: 16px;

font-weight: bold;

}

.ui-menu-item-detali-group-list{

line-height: 23px;

}

.ui-menu-item-detali-group-list a{

display: inline-block;

color: #868686;

margin-right:8px;

font-size: 12px;

padding-bottom: 5px;

}

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

content: '|';

color: #ddd;

padding-left:8px;

}

ui js组件

// ui-search 定义

$.fn.UiSearh = function(){

var ui = $(this);

$('.ui-search-selected',ui).on('click',function(){ //$ ('class命名')当前元素内查找一个元素。 .on做一个时间的侦听（‘点击’）他的时候。函数点击显示出来

$('.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(){//这里选择的是body 鼠标点击隐藏.ui-search-select-list类

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

});

//选中当前文本

}

//页面的脚本逻辑

$(function () {

$('.ui-search').UiSearh(); //页面加载完选出.ui-search

});

//---------------------------------------------------------ui-tab---------------------------------------------------------

// {string} header TAB组件，的所有选项卡item

// {string} content TAB组件，的内容区域，所有item

// {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();

tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');

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

return false;

});

}

//页面的脚本逻辑

$(function () {

$('.ui-search').UiSearh();

$('.content-tab').UiTab('.caption > .item','.block > .item');

$('.content-tob .block .item').UiTab('.block-caption > a','.block-caption > .block-wrap',);//'block-caption'

});

写回答

1回答

好帮手慕星星

2019-04-01

你好，代码中的问题可以参考下图进行修改：

上面修改之后，item类就会有两个，所以切换城区的时候，需要选择第一个item出来，如下：

自己可以修改测试下，祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

如何切换成英文显示？

回答 1

回答 2

回答 1

defer 和 onload有什么区别？

回答 1

在HTML5中，图像的shape 和coords两个属性怎样和实现

回答 2

打开慕课网App查看更多内容