为什么我的js只有一个有效果

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
  <title>实战项目</title>
  <link rel="stylesheet" type="text/css" href="css/bace.css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
  <div>
       <!-- 顶部 -->
    <div class="top">
        <div class="wrap clear">
            <div class="left"><img src="" alt="">010-114/116114电话预约</div>
            <div class="right">欢迎来到城市预约挂号统一平台&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;<a href="#">登录</a href="#">&nbsp;&nbsp;&nbsp;<a href="#">注册</a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">帮助中心</a href="#">
          </div>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <div class="wrap clear">
            <div class="logo"><img src="images/logo.png" alt="logo"></div>
            <div class="search">
             <div class="title">医院</div>
             <div class="title-link">
             <div class="item">科室</div>
             <div class="item">疾病</div>
             <div class="item">医院</div>
             </div>
             <input type="text" name="" placeholder="请输入搜索的内容">
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="wrap clear">
            <div class="item ">首页</div>
            <div class="item">按医院挂号</div>
            <div class="item">按科室挂号</div>
            <div class="item">按疾病挂号</div>
            <div class="item">最新公告</div>
            <div class="item right">社会知名医院</div>
       </div> 
        
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="wrap clear">
         <!-- 上半区 -->
            <div class="summary clear">
             <div class="summary-top">
             <h3>北京协和医院</h3>
             <span>&nbsp;&nbsp;关注医院</span>
             <div>
             <span>等级：</span><a href="">三级甲等</a>&nbsp;
             <span>区域：</span><a href="">东城区</a>&nbsp;
             <span>分类：</span><a href="">中国医科院所属医院 </a>
             </div>
             </div>
             <div class="summary-buttom clear">
             <div class="left">
             <img src="images/hospital-1.jpg" alt="医院">
             </div>
             <div class="middle">
<div class="item">[东院]北京市东城区帅园府一号 [西园]北京市西城区大木仓胡同41号</div>
<div class="item">https:/www.pumch.cn/</div>
<div class="item">东院咨询台：010-69155564；西园咨询台：010-69158010</div>
<div class="item">东院：106，108，110，111，116，684，685路到东单路北；41,104块，814到东单路口南；1,52,782,802到东单路口西；20,25,37，39到东单路口东；103，104,420，803到新东安市场；地铁1、5号线到东单。西院：68到比才胡同东口；更多乘车路线详见须知</div>
             </div>
             <div class="right">
             <img src="images/map-1.png" alt="">
             </div>
             </div>
            </div>
            <!-- 下半区 -->
            <div class="sytem">
             <div class="sytem-nav clear">
             <ul>
             <li class="item fonts">预约挂号</li>
             <li class="item">医院介绍</li>
             <li class="item">预约须知</li>
             <li class="item">停诊信息</li>
             <li class="item">查询取消</li>
             </ul>
             </div>
                <!-- 预约挂号 -->
             <div class="sytem-content clear  show ">
             <div class="sytem-content-left ">
             <div class="title">开放预约科室</div>
                        <div>
                            <table class="table">
                                <tr>
                                    <td class="td">2301</td>
                                    <td>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                    </td>
                                    <td>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                    </td>
                                    <td>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                    </td>
                                    <td>
                                        <p><a href="#">特殊门诊科</a></p>
                                        <p><a href="#">特殊门诊科</a></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td">专科</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td class="td">内科</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td class="td">内科</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
             </div>
             <div class="sytem-content-right ">
             <div class="title">
             预约规则
<span>（更新时间每日8.30更新）</span>
             </div>
             <div class="sytem-content-right-main ">
             <div class="sytem-content-right-main-left ">
             <div>预约周期：</div>
             <div>放号时间：</div>
             <div>停诊时间：</div>
             <div></div>
             <div>退号时间：</div>
             <div>特殊规则：</div>
             </div>
             <div class="sytem-content-right-main-right ">
             <div>7天</div>
             <div>8：30</div>
             <div>下午14:00停止次日预约挂号</div>
             <div>（周五14:00后停挂至下周一）</div>
             <div>就诊前工作日14:00前取消</div>
             <div>
                                    1、看病最佳时间是周一至周三，权威医生在这个时间坐诊的最多。
                                    这个说法不对。“首先‘权威医生都在周一到周三坐诊’就不成立。”南京市中医院门诊办公室副主任江浩说，一般医院在周一到周五都安排专家门诊，比如该院肛肠中心，就有多位是周四专家门诊或周五专家门诊。
                                    2、医生对待患者的态度是：退休返聘老专家年轻医生中年专家。
                                    这个说法也不对。很多人的感受是，老专家的态度最好。但是其实态度取决于医生的职业素养及性格特点，与年龄关系不是特别大。南京市卫生局每年评选的“南京地区十佳医生”，大多数都是中年医生骨干。
                                    3、看病时衣着整洁，不花哨、不土鳖。虽说医者父母心，但不可否认外观在一定程度上决定着医生是否耐心。
                                    南京市中医院门诊办公室副主任江浩说，外观不会决定医生的耐心，医生一般不会“以衣取人”。不过需要提醒的是，去医院穿什么衣服也是有讲究的。需要做检查时要穿容易穿、脱的宽松衣服，取掉佩戴的首饰和装饰品，鞋子应是平跟、容易穿脱为好，女性最好不穿连裤袜。
                                    4、医生态度最好是在整个门诊前15%-40%的时间里。太早没进入状态，晚了又陷入疲劳期、抱怨期。
                                    这不准确。南京市中医院门诊办公室副主任江浩说，每个专家在门诊上都会尽可能满足病人的需要，哪怕有些专家中午1点半才下手术台，匆匆扒了几口饭之后，下午2点钟也会铆足精神为患者解疑答惑。但医生的精力和普通人一样，一个上午要看几十个病人，到后面是进入了疲劳期，有的时候说话的口气会有些着急，所以在就诊的时候，医患双方应该相互体谅。
                                    5、先挂普通号做基础性检查，再挂专家号。第一次检查医生都会让你进行前期的检查准备。
                                    有一定道理。江苏省人民医院门诊部副主任兼门急诊党总支副书记徐婕说，初诊病人不要一开始就着急挂专家号，可以提前挂个普通门诊号。这主要是因为初诊病人一般都需要做相应的检查，有些检查还很费时间，结果也不一定当天就能出来，这时候如果挂专家号，也是开检查单子。把检查预备工作做好，拿着结果再找专家，性价比才是最高的。
                                    6、询问有没有更便宜的药不会影响到医生看病认不认真，这是你的权利。
                                    这个有道理。南京市中医院门诊办公室副主任江浩说，一般来说，医生会尊重病人在药物方面的选择，尽可能让病人感受到相对规范的医疗服务。
                                </div>
             </div>
             </div>
             </div>
             </div>
               <!-- 医院介绍 -->
                <div class="sytem-content ">
                    <div class="abstract">
                       <p>
                       北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其的临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。
                       </p>
                       <p>
                       北京协和医院是中国协和医科大学的临床医学院，中国医学科学院的临床医学研究所，现任院长是赵玉沛，于2007年12月就任；特聘南方著名教授吴颂叶做为顾问。也是综合实力出众的三级甲等医院，北京协和医院拥有一批优秀的医学家、医学教育家和医学科研队伍，拥有大量可与世界接轨的先进设备，医院专科齐全，技术力量雄厚，医疗、科研、教学等方面均有相当的水平。北京协和医院与原北京邮电医院合并后分为益生路东西二院：北京协和医院东院、北京协和医院西院。
                       </p>
                       <p>
                       医院学科齐全、技术力量雄厚、特色专科突出，以多学科综合优势享誉海内外。2002年与邮电总医院合并重组，形成东单和西单两个院区，现有总建筑面积17余万平方米。8年来，通过学科规划和资源整合，初步形成东院以“大医疗为主体”、西院以“大专科、小综合”为特色的医疗格局。干部保健基地和新门急诊楼及手术科室楼将分别于2010年9月和2011年9月建成并投入使用，届时医院总建筑面积将达到49万余平方米，将进一步全面提升医院的就医环境。
                       </p>
                       <p>
                       北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是北京协和医学院的临床学院、中国医学科学院的临床医学研究所，是卫生部指定的全国疑难重症诊治指导中心之一，也是最早承担干部保健和外宾医疗的医院之一。
                       </p>
                    </div>
                </div>
                <!-- 预约须知 -->
                <div class="sytem-content ">
                    <div class="order">
                        <h2>北京协和医院预约须知</h2>
                        <div>
                            <p>尊敬的患者及家属：</p>
 
                            　　<p>北京协和医院全体医务人员愿为您提供最优质的服务和高质量的医疗技术。为方便您的就医，现将普通门诊的基本情况介绍如下：</p>
 
                            　　<p>1、挂号时间：上午6:30—下午4:30，限挂门诊当天号，上、下午号同时挂，一次性挂完为止;</p>
 
                            　　<p>2、就诊时间：周一至周五为全天门诊，周六上午为半天门诊。上午8:00—12:00;下午1:30—5:30。</p>
 
                            　　<p>3、挂号种类及金额(包括诊疗费)：</p>
 
                            　　<p>知名专家号 14元</p>
 
                            　　<p>正教授号 9元</p>
 
                            　　<p>副教授号 7元</p>
 
                            　　<p>主治医师 5元</p>
 
                            　　<p>住院医师号 4.5元</p>
 
                            　　<p>4、患者请携带社保卡、有效证件，就诊前请先建卡、挂号。</p>
 
                            　　<p>5、各科门诊患者就诊次序原则上按挂号先后顺序就诊，预约号后看。</p>
 
                            　　<p>6、门诊中心治疗室抽血时间：周一至周五上午7:30—下午4:00;周六、周日上午半天8:00—11:00。</p>
 
                            　　<p>7、检验结果查询：持诊疗手册患者，请到一楼检验结果查询处持条形码和就诊卡取结果;持大病历的患者，化验结果返回病案科，贴入本人病历内，不用查找。外院标本送检，统一由我院医生开具检验单，并建卡、挂号、交费后，将标本送到一层检验结果查询处。</p>
 
                            　　<p>8、中成药、西药房均在一层取药大厅，患者直接到收费处交费。草药需在草药房先划价再交费。一、三、四层均有收费处。</p>
 
                            　　<p>9、专家出门诊时间基本是固定的，由于专家同时承担着教学、院外会诊、出国等任务需临时停诊。请患者注意每日停诊医师公告牌，以免影响您的就诊。</p>
 
                            　　<p>北京协和医院地址：</p>
 
                            　　<p>东院：北京市东城区东单北大街53号 邮编：100730</p>
 
                            　　<p>西院：北京市西城区大木仓胡同41号 邮编：100032</p>
 
                            　　<p>电话总机：010-65296114</p>
                        </div>
                    </div>
                </div>
                <!-- 停诊信息 -->
                <div class="sytem-content ">
                   <div class="close">
                       <table class="table">
                        <caption>停诊信息</caption>
                           <tr>
                               <td>日期</td>
                               <td>星期</td>
                               <td>时段</td>
                               <td>科室</td>
                               <td>特长</td>
                               <td>职称</td>
                               <td>挂号费</td>
                               <td>可挂号数</td>
                               <td>剩余号数</td>
                               <td>替换方式</td>
                           </tr>
                       </table>
                   </div> 
                </div>
                <!-- 查询取消 -->
                <div class="sytem-content  ">
                  <div class="query">
                      预约识别码：<input type="text" name=""> <button type="">查询订单</button>
                  </div>
                </div> 
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="clear"></div>
    <div class="footer">Copyright © 2017慕课网版权所有</div>
  </div>
  <script src='js/ul.js' type="text/javascript"></script>
</body>
</html>

padding:0;

margin:0;

border:0;

}

input,button,select,textarea{outline:none}

/*此处填写css样式*/

/*统一样式*/

text-decoration: none;

}

.wrap{

width: 1000px;

margin: 0 auto;

}

.clear:after{

clear: both;

}

/*顶部*/

.top{

width: 100%;

height: 30PX;

background-color: #f5f5f5;

line-height: 30px;

font-size: 14px;

}

.top .left{

background: url('../images/icon-call.png')no-repeat center left;

padding-left: 20px;

float: left;

}

.top .right{

float: right;

}

/*头部*/

.header{

height: 90px;

}

.header .logo{

width: 350px;

float: left;

}

.header .logo img{

width: 350px;

}

.header .search{

position: relative;

height: 90px;

width: 326px;

float: right;

background: url('../images/ui-search.jpg') no-repeat center center;

}

.header .search .title{

position: absolute;

left:0px;

top: 25px;

width: 60px;

height: 40px;

line-height: 40px;

font-size: 14px;

color: #fff;

cursor: pointer;

text-align: center;

}

.header .search input{

width: 215px;

height: 30px;

position: absolute;

left:70px;

top: 30px;

}

.header .search .title-link{

display: none;

width: 65px;

height: 75px;

position: absolute;

top: 65px;

left: 2px;

background-color: #fff;

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

}

.header .search .title-link .item{

height: 25px;

line-height: 25px;

text-align: center;

}

.header .search .title-link .item:hover{

background-color: rgba(0, 0, 0, .2);

cursor: pointer;

}

/*导航栏*/

.nav{

/*width: 100%;*/

height: 40px;

line-height: 40px;

background-color: #60bff2;

}

.nav .item{

width: 100px;

height: 40px;

text-align: center;

float: left;

color: #fff;

cursor: pointer;

}

.nav .right{

float: right;

}

.nav .item:hover{

color:#d7f3ff;

}

/*内容区*/

.content{

padding-top: 35px;

padding-bottom: 160px;

}

.content .summary{

background-color: #f7f7f7;

padding: 15px 20px;

}

/* 上半区 */

.summary .summary-top{

height: 30px;

line-height: 30px;

border-bottom: 1px solid #dcdddd;

padding-bottom: 20px;

}

.content .summary .summary-top h3{

display: inline-block;

}

.content .summary .summary-top span{

display: inline-block;

font-size: 14px;

color: #f29600;

}

.content .summary .summary-top div{

float: right;

font-size: 12px;

}

.content .summary .summary-top div span{

font-size: 12px;

color: blue;

}

.content .summary .summary-top div a{

color: #333;

}

.summary .summary-buttom{

height: 212px;

padding-top: 10px;

}

.summary .summary-buttom .left{

float: left;

}

.summary .summary-buttom .middle{

float: left;

margin-left: 30px;

margin-right: 20px;

}

.summary .summary-buttom .middle .item{

width: 430px;

position: relative;

margin-bottom: 10px;

color: #888888;

font-size: 12px;

line-height: 2em;

padding-left: 20px;

}

.summary .summary-buttom .middle .item:before{

position: absolute;

width: 16px;

height: 21px;

left: 0;

top: 0;

display: block;

content: ' ';

background: url('../images/icon-web.png') 0px 5px no-repeat;

}

.summary-buttom .middle .item:nth-child(2):before{

background-position:0px -16px;

}

.summary-buttom .middle .item:nth-child(3):before{

background-position:0px -40px;

}

.summary-buttom .middle .item:nth-child(4):before{

background-position:0px -59px;

}

.summary .summary-buttom .right{

float: right;

}

/* 下半区 */

.sytem{

margin-top: 50px;

width: 100%;

}

.sytem .sytem-nav{

height: 30px;

line-height: 30px;

width: 100%;

border-bottom: 3px solid #60bff2;

margin-bottom: 20px;

}

.sytem .sytem-nav ul{

list-style-type: none;

}

.sytem .sytem-nav ul li{

width: 100px;

text-align: center;

color: #00b3ec;

float: left;

cursor: pointer;

}

.sytem .sytem-nav .fonts{

background-color: #00b3ec;

color: #fff;

height: 32px;

z-index: 1;

}

.sytem-content{

display: none;

position: relative;

width: 100%;

}

/* 预约挂号 */

.sytem-content-left{

float: left;

margin-right: 25px;

width: 695px;

}

.sytem-content-left .title{

width: 655px;

line-height: 40px;

padding-left: 30px;

height: 40px;

background-color: #f4f6fa;

}

.sytem-content-left .table{

width: 685px;

border:1px solid #f4f6fa;

text-align: center;

border-collapse:collapse;

}

.sytem-content-left .table tr td{

width: 145px;

padding-top: 10px;

margin: 0;

height: 90px;

margin-bottom: -2px;

border:solid #f4f6fa 1px;

text-align: left;

}

.sytem-content-left .table tr td p{

margin-bottom: 18px;

padding-left: 20px;

}

.sytem-content-left .table tr td p a{

color: #4c4948;

}

.sytem-content-left .table .td{

color: #888888;

background-color: #f2fbff;

vertical-align: top;

text-align: center;

}

.sytem-content-right{

float: right;

width: 280px;

height: 300px;

}

.sytem-content-right .title{

width: 100%;

line-height: 40px;

padding-left: 10px;

height: 40px;

color: #606060;

background-color: #f4f6fa;

}

.sytem-content-right .title span{

display: inline-block;

font-size: 10px;

color: #00b3ec;

}

.sytem-content-right-main{

width: 100%;

height: 240px;

padding-left: 10px;

padding-top: 10px;

overflow: auto;

}

.sytem-content-right-main-left{

width: 60px;

color: #555555;

font-size: 12px;

float: left;

height: 130px;

}

.sytem-content-right-main-left div{

width: 60px;

height: 20px;

}

.sytem-content-right-main-right{

width: 180px;

height: 240px;

color: #888888;

font-size: 9px;

float: left;

}

.sytem-content-right-main-right div{

margin-top: 2px;

margin-bottom: 4px;

}

/* 医院介绍*/

.abstract{

text-indent: 2em;

line-height: 2em;

}

/* 预约须知*/

.sytem-content .order h2{

text-align: center;

}

/* 停诊信息 */

.sytem-content .close .table{

width: 100%;

border:1px solid #f4f6fa;

text-align: center;

border-collapse:collapse;

}

.sytem-content .close .table tr td{

margin: 0;

border:solid #222 1px;

vertical-align: middle;

text-align: center;

height: 30px;

}

/* 查询取消 */

.sytem-content .query{

width: 100%;

height:300px;

margin: 100px 0 0 0;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

text-align: center;

line-height: 300px;

}

.sytem-content .query input{

width: 200px;

height: 20px;

border: 1px solid #333;

}

.sytem-content .query button{

height: 30px;

width: 100px;

line-height: 30px;

color: #fff;

background-color: #60bff2;

cursor: pointer;

}

/* 页脚区 */

.footer{

height: 70px;

width: 100%;

text-align: center;

line-height: 70px;

background-color: #eceef2;

color: #acacac;

}

.show{

display: block;

}

.clear{

clear: both;

}

var index=0;
//选择搜索内容
$.fn.search=function(){
    ul=$(this);
    $('.title',ul).click(function(){
        $('.title-link',ul).show();
        return false;
    });
    $('.item',ul).click(function(){
        $('.title',ul).text($(this,ul).text());
        $('.title-link',ul).hide();
        return false;
    });
 
    $('body').click(function(){
        $('.title-link',ul).hide();
        return false;
    });
};
// 选择项目
$.fn.sytem=function(){
    ul=$(this);
 
    $('.item',ul).click(function(){
        index=$(this).index();
        $('.item',ul).removeClass('fonts');
        $('.item',ul).eq(index).addClass('fonts');
        $('.sytem-content',ul).removeClass('show');
        $('.sytem-content',ul).eq(index).addClass('show');
    });
};
 
 
 
$(function () {
    $('.search').search();
    $('.sytem').sytem();    
});