从预约挂号切换到科室排班表,前面的隐藏了但是科室排班表显示不出来了css

来源:6-6 作业题

qq_触掱钶忣倖福_0

2019-03-05 16:21:44

*{
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;
}
input{
    background:none;  
    outline:none;  
    border:0px;
}
.cleardisplay{
    display: none;
}
.itemdisplay{
    display: block;
}
.clearfix:after{
    content: ' ';
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    zoom:1;
}
.wrap{
    width: 1000px;
    margin:0 auto;
    position: relative;
}
/*top区*/
.top{
    background-color: #f5f5f5;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}
.top p{
    padding: 0;
    margin: 0;
}

.top .call{
    float: left;
    padding-left: 20px;
    color: #868686;
    background:url(img/icon-call.png) center left no-repeat;
}
.top .wel span{
    color: #868686;
}
.top .wel{
    float: right;
}

.top a{
    padding-left: 10px;
    color:#2da5e1;
}
/*header区*/
.header .logo{
    width: 400px;
    height: 80px;
    padding: 10px 0;
    
}
.header .logo img{
    width: 400px;
    height:80px;
}
.header .search{
    width: 330px;
    height: 40px;
    
    position: absolute;
    right: 0;
    top: 30px;
}
/*nav区*/
.nav{
    background-color: #60bff2;
    width: 100%;
    
}
.nav .link{
    display: inline-block;
    line-height: 40px;
    color: white;
    font-size: 20px;
    padding-left: 30px;
    text-align: center;
}
.nav .right{
    float: right;
    padding-right:10px;
}
.nav a:hover{
    color: #d7f3ff
}
/*医院简介区*/
.conttop .wrap{
    background-color: #F7F7F7;
    
    margin-top: 30px;
    overflow: hidden;
}
.conttop  .contleft{
    float: left;
    padding-left: 30px;
    margin-top: 10px;
}
.conttop  .contleft span{
    font-size: 20px;
}
.conttop  .contleft a{
    font-size: 15px;
    color: orange;
}
.conttop  .contright{
    float: right;
    padding-right: 30px;
    margin-top: 10px;
}
.conttop  .contright .cr{
    color: blue;
    font-size: 15px;
}

/*下划线*/
.conttop .hr{
    border-bottom: 2px #868686 solid;
    margin:50px 30px 10px 30px;

}
/*图,文,地图*/
.conttop .left,
.conttop .middle,
.conttop .right{
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
}
.conttop .left{
    width: 200px;
    height:200px;
    padding-left: 30px;
}
.conttop .left img{
    width: 200px;
    height: 180px;
    
}
.conttop .middle{
    width:430px;
    padding-left: 40px;
    color:  #868686;
    font-size: 15px;
}
.conttop .middle .frist {
    background:url(img/qq1.png) no-repeat left;
    padding-left: 30px;
}
.conttop .middle .sce{
    background:url(img/qq2.png)  left no-repeat;
    padding-left: 30px;
}
.conttop .middle .thr{
    background:url(img/qq3.png)  left no-repeat;
    padding-left: 30px;
}
.conttop .middle .fou{
    background:url(img/qq4.png)  left no-repeat;
    padding-left: 30px;
}
.conttop .right{
    width: 250px;
    height: 180px;
    padding-left: 30px;
}
.conttop .right img{
    width: 250px;
    height: 180px;
}
/*医院体系区*/
.contbottom{
    background: none;
    margin-top: 30px;
    overflow: hidden;
    position: relative;

}
.contbottom .connav{
    border-bottom: 2px #2da5e1 solid;
}
.contbottom .connav .item{
    background-color: #60bff2;
    color: white;
}
.contbottom .connav a{
    color: #2da5e1;
    font-size: 18px;
    display:inline-block;
    width: 100px;
    text-align: center;
    margin-right: 20px;
}
.contbottom .connav a:hover{
    color: white;
    background-color:#2da5e1;
}
.contbottom .yuyue{
    height: 400px;
}
.contbottom .yuyue .table{
    margin-top: 20px;
    width: 700px;
    overflow: hidden;
}
.contbottom .yuyue .table table{
    border:1px solid #f5f5f5;
}
.contbottom .table .table-big caption{
    text-align: left;
    background-color: #f5f5f5;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding-left: 30px;
}
.contbottom .table .table-big tr td{
    width: 100px;
    line-height: 20px;
    font-size: 15px;
}
.contbottom .table .table-big tr td a{
    padding-left: 10px;
}
.contbottom .table .table-big .rowspan{
    background-color: #f2fbff;
    color: #a2a5a6;
    vertical-align: top;
    text-align: center;
}

.contbottom .table .table-big tr td a{
    color: black;
    font-size: 13px;
}
.contbottom .table .tda{
    background-color: #F7F7F7;
}
.contbottom .table,
.contbottom .rtable{
    float: left;
}
.contbottom .yuyue .rtable{
    width: 280px;
    margin-left: 20px;
    margin-top: 20px;
    
}
.contbottom .yuyue .rtable .rtable-p{
    background-color:#f5f5f5;
    height: 50px;
    padding-left: 10px;
    
}
.contbottom .yuyue .rtable .rtable-p .rtable-p-span1{
    font-size: 20px;
    line-height: 50px;
}

.contbottom .yuyue .rtable .rtable-div{
    width: 280px;
    height:200px;
    overflow-y: scroll;
    border: 2px solid #f5f5f5;
}

.contbottom .yuyue .rtable .rtable-div .rtable-div-list{
    padding-top: 10px;
    padding-left: 10px;
}
.contbottom .yuyue .rtable .rtable-div .rtable-div-list span{
    font-size: 15px;
}
.contbottom .yuyue .rtable .rtable-div .rtable-p-span3{
    display: inline-block;
    color:  #868686;
    font-size: 12px;
}
/*医院介绍*/
.contbottom .jieshao{
    padding-top: 20px;
    
}
/*-预约须知*/
.contbottom .xuzhi{
    
}
.contbottom .xuzhi h2{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*停诊信息*/
.contbottom .tingzhen{
    
}
.contbottom .tingzhen h4{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.contbottom .tingzhen .tingzhen-table{
    border: 1px solid #f5f5f5;
    text-align: center;
}
/*查询取消*/
.contbottom .chaxun{

}
.contbottom .chaxun .hr-top{
    border-bottom: 1px solid  #f5f5f5;
    margin-top: 50px;
    margin-bottom: 80px;
}
.contbottom .chaxun .hr-buttom{
    border-bottom: 1px solid  #f5f5f5;
    margin-bottom: 50px;
    margin-top: 80px;
}
.contbottom .chaxun .chaxun-search {
    padding-left: 300px
}
.contbottom .chaxun .chaxun-search span{
    font-size: 18px;
}
.contbottom .chaxun .chaxun-search .input1{
    border:1px solid #f5f5f5;
    width: 180px;
    height: 30px;
}
.contbottom .chaxun .chaxun-search .input2{
    background-color: #60bff2;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 30px;
    width: 100px;
}
/*科室排班表*/
.fixed{
    margin-top: 30px;
}
.fixed .fixed-nav{
    margin-bottom: 20px;
    margin-left: 8px;
}
.fixed .fixed-nav span{
    font-size: 18px;
}
.fixed .fixed-nav a{
    font-size: 15px;
    color: #66d1f4;
    padding-left: 10px;
}
.fixed .fixed-table .tr1{
    background-color: #f8fafc;
    
}
.fixed .fixed-table .tr1 th{
    color: #babbbb;
    font-size: 15px;
}
.fixed .fixed-table .tr1 img{
    height:50px;
    width: 40px;
}
.fixed .fixed-table .tr1 ul{
    overflow-y: scroll;
}
.fixed .fixed-table .tr1 ul span{
    font-size: 18px;
}
.fixed .fixed-table .tr1 ul ol{
    font-size: 15px;
}
.fixed .fixed-table .tr-td{
    background-color: #e0eefd;
    color: #66d1f4;
    text-align: center;
}
.fixed .fixed-table .rowspan3{
    background-color: #f2f8ff;
}
.fixed .fixed-table .fixed-colspan{
    text-align: center;
    font-size: 20px;
    height: 50px;
    color: #bcbcbc;
}
/*footer区*/
.footer{
    background-color:#acacac;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 50px;
    overflow: hidden;
    }

写回答

2回答

山河远阔ZZ

2019-03-05

同学你好。

1、'.contbottom'是最外层的复元素,它包含预约挂号这一块的内容,所以切换到课时排班表的时候,“'.contbottom'”整个区域都隐藏掉了。

建议修改如下:

content区域和fixed区域是兄弟结构,当点击了按钮之后,让content区域隐藏,让fixed元素显示。

http://img.mukewang.com/climg/5c7e3bbf0001a5ad12720447.jpg

自己试一试哦,如果帮助到了你,欢迎采纳。

祝学习愉快~

0
hq_触掱钶忣倖福_0
h 返回科室列表的功能是不是反过来就行了,没反应 var tablelist=$('.table-list'); var content=$('.content'); var connav=$('.connav'); var fixed=$('.fixed'); var fixednavlista=$('.fixed-nav-lista'); tablelist.click(function(){ content.addClass('cleardisplay'); connav.addClass('cleardisplay'); fixed.removeClass('cleardisplay'); }) fixednavlista.click(function(){ fixed.addClass('cleardisplay'); content.removeClass('cleardisplay'); connav.removeClass('cleardisplay'); })
h019-03-05
共1条回复

山河远阔ZZ

2019-03-05

同学你好,在html中,应该给“返回科室列表添加上一样的类名”,参考下图:

http://img.mukewang.com/climg/5c7e4d6e00013b7d07310095.jpg

自己试一试哦。

0

0 学习 · 36712 问题

查看课程