老师，请帮我看看为什么点击进度圆点，没有弹出debugger呢
来源：5-7 首页.UI组件-UiSlider（2）
宝慕林4199460
2019-08-06 00:50:07
视频中是这样的
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>城市医院预约平台</title> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/ui.css"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="top" class="top"> <div class="wrap"> <p class="call">101-114/116114电话预约</p> <p class="welcome"> 欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> <a href="#">帮助中心</a> </p> </div> </div> <div id="header" class="header"> <div class="wrap clearfix"> <a class="logo" href="#"><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="#1">科室</a> <a href="#1">疾病</a> <a href="#1">医院</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"> <div class="link menu">全部科室 <div class="menu-list ui-menu"> <div class="ui-menu-item"> <a href="#1" class="ui-menu-item-department">内科</a> <a href="#1" class="ui-menu-item-disease">高血压</a> <a href="#1" 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="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</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="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="#1" class="ui-menu-item-department">外科</a> <a href="#1" class="ui-menu-item-disease">a疾病</a> <a href="#1" 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="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</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="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="#1" class="ui-menu-item-department">儿科</a> <a href="#1" class="ui-menu-item-disease">c疾病</a> <a href="#1" class="ui-menu-item-disease">d疾病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> c疾病 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> d疾病 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">心脑血管科</a> <a href="#1">心脑血管科</a> <a href="#1">神经内科</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> <div id="banner" class="banner"> <div class="banner-slider ui-slider"> <div class="ui-slider-wrap"> <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a> <a href="#0" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a> <a href="#0" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a> </div> <div class="ui-slider-arrow"> <a href="#l" class="item left"></a> <a href="#r" class="item right"></a> </div> <div class="ui-slider-process"> <a href="#0" class="item item_focus"></a> <a href="#1" class="item item"></a> <a href="#1" 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="快速查询"> </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 id="content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <div class="caption"> <a href="#8" class="item item_focus">医院</a> <a href="#7" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="#1" class="block-caption-item block-caption-item_focus">全部</a> <a href="#1" class="block-caption-item">东城区</a> <a href="#1" class="block-caption-item">西城区</a> <a href="#1" class="block-caption-item">朝阳区</a> <a href="#1" class="block-caption-item">丰台区</a> <a href="#1" class="block-caption-item">石景山区</a> <a href="#1" class="block-caption-item">海淀区</a> <a href="#1" class="block-caption-item">门头沟区</a> <a href="#1" class="block-caption-item">房山区</a> <a href="#1" 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="xx医院"> <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"> <img src="img/hospital-1.jpg" alt="xx医院"> <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"> <img src="img/hospital-1.jpg" alt="xx医院"> <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"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div> <div class="item-phone">电话： 东院咨询台：010-69155564..</div> <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div> </div> </div> <div class="block-text-list clearfix"> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a> </div> <div class="block-more">更多医院</div> </div> <div class="block-wrap" style="display: none;"> 其他城区内容 </div> </div> </div> <div class="item" style="display: none;"> 科室内容 </div> </div> </div> <div class="content-news"> <div class="caption"> 最新公告 <a href="#8" class="more">|更多</a></div> <div class="list"> <a href="#9" class="link">医院特需门诊暂停更新号源通...</a> <a href="#9" class="link">防护策略升级通知</a> <a href="#9" class="link">医院特需门诊暂停更新号源通...</a> <a href="#9" class="link">防护策略升级通知</a> <a href="#9" class="link">医院特需门诊暂停更新号源通...</a> <a href="#9" class="link">防护策略升级通知</a> </div> </div> <div class="content-close"> <div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a></div> <div class="list"> <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a> <a href="#9" class="link">首都医科大学附属北京安贞医院消</a> <a href="#9" class="link">医院特需门诊暂停更新号源通...</a> <a href="#9" class="link">防护策略升级通知</a> <a href="#9" class="link">医院特需门诊暂停更新号源通...</a> <a href="#9" class="link">北京安贞医院</a> </div> </div> </div> </div> <div id="footer" class="footer"> Copyright ©2017 慕课网版权所有 </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
//ui.js如下
//ui-search 定义
$.fn.UiSearch = function(){
var ui = $(this);
$('.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() );
$('.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();
tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'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);
var windowHeight = $(window).height();
$(window).on('scroll',function(){
var top = $('body').scrollTop() || $(document).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. 滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击）
$.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);
// 具体操作
wrap
.on('move_prev',function(){
})
.on('move_to',function(){
debugger;//为什么没反应呢
});
// 事件
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',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) 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{
position: absolute;
width: 208px;
height: 26px;
top: 5px;
left: 75px;
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{}
.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 0px no-repeat;
}
.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-disease{
font-size: 12px;
float: right;
padding-left: 5px;
color: #d7f3ff;
}
.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-department:before{
background-position: 0 0;
/*background-position-x: 0; 方法二*/
}
.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;
background: #fff url(../img/bg-menu.jpg) center no-repeat;
top: 0;
left: 198px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1);
}
.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: #eee;
padding-left: 8px;
}
/*回到顶部*/
.ui-backTop{
display: none;/*默认隐藏*/
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: 99999px;
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: 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;
}/*layout.css*/
body{
margin: 0;
padding: 0;
}
/*通用样式*/
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
}
.clearfix:after{/*伪元素清除浮动*/
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom:1;/*兼容IE*/
}
.top {
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 802px;/*1000-198=802*/
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: 32px;
padding: 25px 0;
background-color: #eceef2;
text-align: center;
line-height: 32px;
}base.css
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
}
/* #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 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;/*相对于wrap定位*/
right: 0px;
top: 29px;
/*background-color: orange;*/
}
/* #nav 模块内样式*/
.nav .link{
display: inline-block;
float: left;
padding-left: 36px;
line-height: 36px;/*当没有设置高度，行高可以使得元素具有高度*/
color: #fff;
font-size: 16px;
min-width: 80px;
}
.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 模块内样式*/
.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: #fec009;
font-size: 16px;
background: url(../img/icon-help.png) no-repeat 0 0;
}
.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{
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 #f3f6fa;
}
.content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
background-color: #f3f6fa;
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) 17px 20px no-repeat;
}
.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) 17px 20px no-repeat;
/*background-image: url(../img/list-blue.jpg); 也可以只改变图片*/
}
.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 .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;
right: 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;
}
.content-tab .block-content .block-text-list .item span{/*这里是我自己添加的*/
float: right;
}这么大项目复制过来，真是麻烦老师了
写回答
1回答
-
同学你好，
是小圆点没有获取到，所以点击没有效果：
选择器前面需要加点，class类，要注意这个部分哦。
祝学习愉快！
0
相似问题