老师，我这个下方tab切换为什么没起作用？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hospital</title>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/base.css" rel="stylesheet"/>
<link href="css/ui.css" rel="stylesheet"/>
</head>
<body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-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="#">科室</a>
<a href="#">疾病</a>
<a href="#">医院</a>
</div>
<input type="text" name="search" 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 link1">首页</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="up" class="up">
<div class="block">
<div class="caption">北京协和医院 <span class="span1">关注医院</span>
<span class="right"><span class="span2">等级:</span>三级甲等 <span class="span2">区域:</span>东城区 <span class="span2">分类:</span>中国医科院所属医院</span>
</div>
<div class="up-content">
<img src="img/hospital-1.jpg"/>
<div class="list">
<div class=" item item_address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</div>
<div class="item item_web">http://www.punch.cn/</div>
<div class="item item_call">东院咨询台:010-69155564; 西院咨询台:010-69158010</div>
<div class="item item_bus">东院:106,108,110,111,116,684,685到东单路口北; 41,104快，814到东单路口南; 1,52,728,802到东单路口西; 20,25,37,39,到东单路口东;<br/>103,104,420,803到新东安市场; 地铁1、5号线到东单。西院:68到辟才胡同口; 更多乘车路线详见须知</div>
</div>
<img class="map" src="img/map-1.png"/>
</div>
</div>
</div>
<div id="content" class="content">
<div class="wrap clearfix">
<div id="content-caption" class="content-caption">
<a href="#" class="item item_focus">预约挂号</a>
<a href="#" class="item">医院介绍</a>
<a href="#" class="item">预约须知</a>
<a href="#" class="item">停诊信息</a>
<a href="#" class="item">查询取消</a>
</div>
<div id="content-tab" class="content-tab">
<div class="item">
<div id="content-tab-left" class="content-tab-left">
<div class="caption">开放预约科室</div>
<table cellspacing="0" cellpadding="3px">
<tr align="left">
<td rowspan="3" bgcolor="#f2fbff" align="center" valign="top">2301</td>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
</tr>
<tr>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
</tr>
<tr>
<td>特殊门诊科</td>
<td>特殊门诊科</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#f2fbff" align="center" valign="top">专科</td>
<td>多发性硬化专科</td>
<td>门诊麻醉科</td>
<td>门诊麻醉科</td>
<td>多发性硬化专科</td>
</tr>
<tr>
<td>多发性硬化专科</td>
<td>门诊麻醉科</td>
<td>门诊麻醉科</td>
<td>多发性硬化专科</td>
</tr>
<tr>
<td>多发性硬化专科</td>
<td>门诊麻醉科</td>
<td>门诊麻醉科</td>
<td>多发性硬化专科</td>
</tr>
<tr>
<td rowspan="3" bgcolor="#f2fbff" align="center" valign="top">内科</td>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
<tr>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
<tr>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
<tr>
<td rowspan="3" bgcolor="#f2fbff" align="center" valign="top">内科</td>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
<tr>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
<tr>
<td>肿瘤内科门诊</td>
<td>特需血液内科</td>
<td>特需血液内科</td>
<td>肿瘤内科门诊</td>
</tr>
</table>
</div>
<div id="content-tab-appoint" class="content-tab-appoint">
<div class="caption">预约规则<span>（更新时间每日8:30更新）</span></div>
<div class="appoint-text">
<dl>
<dt>预约周期：</dt>
<dd>7天</dd>
</dl>
<dl>
<dt>放号时间：</dt>
<dd>8:30</dd>
</dl>
<dl>
<dt>停挂时间：</dt>
<dd>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</dd>
</dl>
<dl>
<dt>退号时间：</dt>
<dd>就诊前一工作日14:00前取消</dd>
</dl>
<dl>
<dt>特殊规则：</dt>
<dd>①取号地点不同:西院区预约号取号地点:西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点:东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<!--(医院介绍)-->
</div>
<div class="item">
<!--(预约须知)-->
</div>
<div class="item">
<!--(停诊信息)-->
</div>
<div class="item">
<!--(查询取消)-->
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Copyright © 2017慕课网版权所有
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script 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
*/
$.fn.UiTab=function(header,content){
var ui=$(this);
var tabs=$(header,ui);
var cons=$(content,ui);
tabs.on('cllick',function(){
var index=$(this).index();
tabs.removeClass('item_focus').eq(index).addClass('item_focus');
})
}
//页面的脚本逻辑
$(function(){
$('.ui-search').UiSearch();
$('.content').UiTab('.content-caption>.item','.content-tab>.item');
})
正在回答
你好同学 , 问题如下解决 :
另外 ,a链接会有默认点击跳转行为 , 如下设置阻止默认的行为:
建议同学下次提问新问题一定要把相关的代码都上传完整 ，这样老师才能准确高效的解决问题。
祝学习愉快 ,望采纳 .
/*layout.css*/
body{
margin:0;
padding: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;
}
.nav{
height:36px;
background-color:#60bff2;
}
.up{
width:948px;
margin:0 auto;
padding:0 26px 16px 26px;
height:244px;
margin-top:30px;
background-color:#f7f7f7;
}
.content{
padding:40px 0 80px 0;
}
.content-caption{
height:34px;
width:1000px;
}
.content-tab{
margin-top:20px;
}
.content-tab-left{
width:706px;
height:404px;
float:left;
background-color:#fff;
border:1px solid #f4f6fa;
}
.content-tab-appoint{
float:right;
width:272px;
height:284px;
background-color:#fff;
}
.footer{
height:70px;
background-color:#eceef2;
}
/*base.css*/
p{
margin:0;
padding:0;
display:inline-block;
}
a{
text-decoration:none;
}
ul{
list-style: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-bottom:10px;
}
.top .welcome{
float:right;
}
/*header*/
.header .logo{
width:400px;
height:82px;
padding:5px 0;
display:inline-block;
}
.header .logo img{
width:100%;
height:100%;
margin-top:0;
}
.header .search{
width:326px;
height:38px;
position:absolute;
right:0;
top:29px;
/*background-color:orange;*/
}
/*nav*/
.nav .link{
display:inline-block;
float:left;
padding-left:30px;
line-height:36px;
font-size:16px;
text-align:center;
color:#fff;
}
.nav .link1{
width:90px;
}
.nav .right{
float:right;
}
.nav a:hover{
color:#d7f3ff;
}
/*up*/
.block{
width:948px;
height:228px;
}
.block .caption{
height:52px;
line-height:52px;
border-bottom:1px solid #ddd;
}
.block .caption .span1{
color:orange;
font-size:14px;
}
.block .caption .right{
float:right;
font-size:14px;
}
.block .caption .span2{
color:blue;
}
.up-content{
height:192px;
}
.up-content .list{
width:460px;
height:188px;
background-position:10 10;
font-size:13px;
padding-left:34px;
line-height:26px;
color:#aaa;
position:relative;
}
.up-content .list .item:before{
content:' ';
display:block;
width:20px;
height:20px;
background:url(../img/icon-web.png) no-repeat;
position:absolute;
left:10px;
top:6px;
}
.up-content .list .item_address:before{
background-position:0 0;
}
.up-content .list .item_web:before{
background-position:0 -20px;
top:30px;
}
.up-content .list .item_call:before{
background-position:0 -40px;
top:54px;
}
.up-content .list .item_bus:before{
background-position:0 -60px;
top:80px;
}
img,.list{
float:left;
margin-top:12px;
}
.map{
float:right;
width:250px;
height:166px;
}
/*content*/
.content-caption{
height:33px;
line-height:33px;
border-bottom:2px solid rgb(96,191,242);
}
.content-caption2{
height:33px;
line-height:33px;
margin-bottom:10px;
margin-left:10px;
}
.content-caption2 .return{
color:rgb(96,191,242);
font-size:14px;
margin-left:10px;
}
.content-caption .item{
display:block;
height:33px;
width:110px;
text-align:center;
float:left;
color:rgb(96,191,242);
}
.content-caption .item_focus{
background-color:rgb(96,191,242);
color:#fff;
}
.time{
height:390px;
width:1000px;
}
.time .timetable{
width:726px;
height:324px;
position:relative;
float:left;
}
.time .timetable .item{
width:36px;
height:324px;
background-color:#f2f8ff;
}
.time .timetable .left{
position:absolute;
top:0;
left:0;
}
.time .timetable .right{
position:absolute;
top:0;
right:0;
}
.content-tab .item2,.item3{
padding:10px;
}
.content-tab .item2,.item3 p{
margin-bottom:14px;
line-height:26px;
}
.content-tab .item3 h3{
text-align:center;
margin:0 0 10px 0;
}
.content-tab .item3 .bj{
}
.content-tab .item3 span{
font-weight:bold;
}
.content-tab .item4 table caption{
margin-bottom:20px;
font-size:18px;
font-weight:bold;
}
.content-tab .item4 table tr{
text-align:center;
font-size:16px;
color:grey;
}
.content-tab .item5{
height:400px;
position:relative;
}
.content-tab .item5 .item5-content{
height:200px;
width:1000px;
border-top:2px solid #eee;
border-bottom:2px solid #eee;
position:absolute;
top:80px;
left:0;
}
.content-tab .item5 .item5-content .id-box{
width:400px;
height:100px;
margin:0 auto;
position:relative;
top:50px;
}
.content-tab .item5 .item5-content .id-box .idcode{
position:absolute;
left:0;
top:37px;
}
.content-tab .item5 .item5-content .id-box .idcode-input{
width:210px;
height:26px;
position:absolute;
left:90px;
top:34px;
}
.content-tab .item5 .item5-content .id-box a{
display:block;
height:32px;
width:90px;
background-color:#60bff2;
color:#fff;
font-size:14px;
line-height:32px;
text-align:center;
position:absolute;
right:2px;
top:34px;
}
.content-tab-appoint{
border:1px solid #f4f6fa;
}
.content-tab-left .caption,
.content-tab-appoint .caption{
height:40px;
line-height:40px;
background-color:#f4f6fa;
text-indent:10px;
color:rgb(85,85,85);
font-size:15px;
}
.content-tab-left .caption{
text-indent:20px;
}
.content-tab-left table{
width:706px;
height:366px;
}
.content-tab-left table tr{
text-align:left;
}
.content-tab-left table td{
width:141.2px;
}
.content-tab-left table td a:link{
color:#000;
}
.content-tab-left table td a:visited{
color:#000;
}
.content-tab-appoint .caption span{
font-size:14px;
color:rgb(96,191,242);
}
.appoint-text{
height:244px;
overflow-y:scroll;
font-size:13px;
}
.appoint-text dt,dd{
float:left;
line-height:26px;
margin-left:10px;
}
.appoint-text dt{
width:68px;
}
.appoint-text dd{
width:170px;
color:rgb(136,136,136);
}
/*footer*/
.footer{
line-height:70px;
text-align:center;
font-size:12px;
color:#b3b3b3;
}
老师，这是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,0.2);
left:2px;
top:38px;
}
.ui-search-select-list a{
display:block;
color:#a5a2a2;
text-align:center;
z-index:2;
}
.ui-search-select-list a:hover{
background-color:#ebeef5;
}
.ui-search-input{
width:210px;
height:30px;
position:absolute;
left:69px;
top:1px;
font-size:13px;
line-height:26px;
color:#a5a2a2;
}
.ui-search-submit{
display:block;
position:absolute;
right:0;
top:1px;
width:40px;
height:36px;
}
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星