用JavaScript实现点击左侧列表右侧显示列表内容的方法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title> 
  6 
  7     <!-- mobile responsive meta -->
  8     <meta name="viewport" content="width=device-width, initial-scale=1">
  9     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 10     <link rel="stylesheet" href="css/style.css">
 11     <link rel="stylesheet" href="css/responsive.css">
 12     <link rel="stylesheet" href="fonts/flaticon.css" />
 13     
 14     <style type="text/css">
 15         .outer-box{ 
 16         display:none
 17         }
 18         .hand{
 19         cursor:pointer
 20             }
 21         #nr1{
 22         display:none
 23             }
 24         #jgsj{
 25         color:green
 26             }
 27     </style>
 28 
 29 </head>
 30 
 31 <body>
 32         <!-- Menu -->
 33         <section class="theme_menu stricky">
 34             <div class="container">
 35                 <div class="row">
 36                     <div class="col-md-5">
 37                         <div class="main-logo">
 38                             <a href="index.html"><img src="images/logo/logo.png" alt=""></a>
 39                         </div>
 40                     </div>
 41                     <div class="col-md-5 menu-column" style="margin-left:200px">
 42                         <nav class="menuzord" id="main_menu">
 43                            <ul class="menuzord-menu">
 44                                 <li><a href="index.html">主页</a></li>
 45                                 <li><a href="about.html">关于我们</a></li>
 46                                 <li><a href="service.html">服务详情</a></li>
 47                                 <li><a href="service-single.html">服务列表</a></li>                                    
 48                                 <li><a href="contact.html">联系我们</a></li>
 49                             </ul> <!-- End of .menuzord-menu -->
 50                         </nav> <!-- End of #main_menu -->
 51                     </div>
 52                 </div>
 53             </div> <!-- End of .conatiner -->
 54         </section> <!-- End of .theme_menu -->
 55 
 56         <!--Page Title-->
 57         <section class="page-title">
 58             <div class="container">
 59                 <div class="row clearfix">
 60                     <div class="col-md-6 col-sm-6 col-xs-12 pull-left">
 61                         <h1>服务列表</h1>
 62                         <p>下面是我们服务的各项内容</p>
 63                     </div>
 64                     <div class="col-md-6 col-sm-6 col-xs-12 pull-right text-right path"><a href="index.html">主页</a>&ensp;/&ensp;<a href="#">服务列表</a></div>
 65                     <div class="overlay"></div>
 66                 </div>
 67             </div>
 68         </section>
 69         <!--Page Title Ends-->
 70         
 71         <section class="service-single">
 72             <div class="container">
 73                 <div class="row">     
 74                     <div class="col-md-4 col-sm-12 col-xs-12">          
 75                         <div class="service-sidebar">
 76                             <ul class="service-catergory">
 77                                 <li id="jgsj" class="hand"><span class="icon-left fa fa-chevron-right"></span>景观设计</li>
 78                                 <li id="zs" class="hand"><span class="icon-left fa fa-chevron-right"></span>植树</li>
 79                                 <li id="hyhl" class="hand"><span class="icon-left fa fa-chevron-right"></span>花园护理</li>
 80                                 <li id="cpyh" class="hand" ><span class="icon-left fa fa-chevron-right"></span>草坪养护</li>
 81                                 <li id="jghy" class="hand"><span class="icon-left fa fa-chevron-right"></span>浇灌花园</li>
 82                                 <li id="cc" class="hand"><span class="icon-left fa fa-chevron-right"></span>除草</li>
 83                             </ul>                                                 
 84                         </div>
 85                     </div>
 86                     
 87                     
 88                     
 89                     <div class="col-md-8 col-sm-12 col-xs-12">
 90                         <div id="nr1" class="outer-box" style="display:block">
 91                             <div class="img-box"><img src="images/resources/service-1.jpg" alt=""></div>
 92                             
 93                                 
 94                                 <div class="content-box">
 95                                     <div class="sec-title">
 96                                         <h4>景观设计</h4>
 97                                     </div>
 98                                     
 99                                     <div class="text">
100                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
101                                     </div>
102                                 
103                                     <div class="text style-two">
104                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
105                                     </div>
106                                     <div class="row clearfix">
107                                         <div class="col-md-6 col-sm-6">
108                                             <h4>主要服务</h4>
109                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
110                                         </div>
111                                         <div class="col-md-6 col-sm-6">
112                                             <h4>近代时期</h4>
113                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
114                                         </div>
115                                     </div>
116                                     
117                                 </div>                                                                               
118                         </div>
119                         
120                         <div id="nr2" class="outer-box">
121                             <div class="img-box"><img src="images/resources/service-2.jpg" alt=""></div>
122                             
123                                 
124                                 <div class="content-box">
125                                     <div class="sec-title">
126                                         <h4>植树</h4>
127                                     </div>
128                                     
129                                     <div class="text">
130                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
131                                     </div>
132                                 
133                                     <div class="text style-two">
134                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
135                                     </div>
136                                     <div class="row clearfix">
137                                         <div class="col-md-6 col-sm-6">
138                                             <h4>主要服务</h4>
139                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
140                                         </div>
141                                         <div class="col-md-6 col-sm-6">
142                                             <h4>近代时期</h4>
143                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
144                                         </div>
145                                     </div>
146                                     
147                                 </div>                    
148                                 
149                                                                                     
150                         </div>
151                         
152                         <div id="nr3" class="outer-box">
153                             <div class="img-box"><img src="images/resources/service-3.jpg" alt=""></div>
154                             
155                                 
156                                 <div class="content-box">
157                                     <div class="sec-title">
158                                         <h4>花园护理</h4>
159                                     </div>
160                                     
161                                     <div class="text">
162                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
163                                     </div>
164                                 
165                                     <div class="text style-two">
166                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
167                                     </div>
168                                     <div class="row clearfix">
169                                         <div class="col-md-6 col-sm-6">
170                                             <h4>主要服务</h4>
171                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
172                                         </div>
173                                         <div class="col-md-6 col-sm-6">
174                                             <h4>近代时期</h4>
175                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
176                                         </div>
177                                     </div>
178                                     
179                                 </div>                                                                                         
180                         </div>
181                         
182                         <div id="nr4" class="outer-box">
183                             <div class="img-box"><img src="images/resources/service-4.jpg" alt=""></div>
184                             
185                                 
186                                 <div class="content-box">
187                                     <div class="sec-title">
188                                         <h4>草坪养护</h4>
189                                     </div>
190                                     
191                                     <div class="text">
192                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
193                                     </div>
194                                 
195                                     <div class="text style-two">
196                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
197                                     </div>
198                                     <div class="row clearfix">
199                                         <div class="col-md-6 col-sm-6">
200                                             <h4>主要服务</h4>
201                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
202                                         </div>
203                                         <div class="col-md-6 col-sm-6">
204                                             <h4>近代时期</h4>
205                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
206                                         </div>
207                                     </div>
208                                     
209                                 </div>                                                                               
210                         </div>
211                         
212                         <div id="nr5" class="outer-box">
213                             <div class="img-box"><img src="images/resources/service-3.jpg" alt=""></div>
214                             
215                                 
216                                 <div class="content-box">
217                                     <div class="sec-title">
218                                         <h4>浇灌花园</h4>
219                                     </div>
220                                     
221                                     <div class="text">
222                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
223                                     </div>
224                                 
225                                     <div class="text style-two">
226                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
227                                     </div>
228                                     <div class="row clearfix">
229                                         <div class="col-md-6 col-sm-6">
230                                             <h4>主要服务</h4>
231                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
232                                         </div>
233                                         <div class="col-md-6 col-sm-6">
234                                             <h4>近代时期</h4>
235                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
236                                         </div>
237                                     </div>
238                                     
239                                 </div>                                                                               
240                         </div>
241                         
242                         <div id="nr6" class="outer-box">
243                             <div class="img-box"><img src="images/resources/service-2.jpg" alt=""></div>
244                             
245                                 
246                                 <div class="content-box">
247                                     <div class="sec-title">
248                                         <h4>除草</h4>
249                                     </div>
250                                     
251                                     <div class="text">
252                                         <p>风景园林规划设计(景观设计)[1]  要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景,如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
253                                     </div>
254                                 
255                                     <div class="text style-two">
256                                         <p>这些景观要素为创造高质量的城市空间环境提供了大量的素材,但是要形成独具特色的城市景观,必须对各种景观要素进行系统组织,并且结合风水使其形成完整和谐的景观体系,有序的空间形态。</p>
257                                     </div>
258                                     <div class="row clearfix">
259                                         <div class="col-md-6 col-sm-6">
260                                             <h4>主要服务</h4>
261                                             <p>景观设计主要服务于:城市景观设计(城市广场、商业街、办公环境等)、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
262                                         </div>
263                                         <div class="col-md-6 col-sm-6">
264                                             <h4>近代时期</h4>
265                                             <p>中国传统符号种类很多,有中国传统的吉祥物:青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等;有五行的金、木、水、火、土;还有中国传统的宝相植物:牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵,运用形式多种多样,可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上;或以雕塑小品的形式出现;或与灯饰相结合。</p>
266                                         </div>
267                                     </div>
268                                     
269                                 </div>                                                                               
270                         </div>
271                     </div>
272                 </div>
273             </div>
274         </section>
275         
276         
277 
278 
279         <!--call-to-action section-->
280         <section class="call-to-action subscribe-intro">
281             <div class="container">
282                 <div class="row">    
283                     <div class="col-md-9">
284                         <h3>及早联系园艺师</h3>
285                         <p>园艺师会给你一些最好的意见和建议</p>
286                     </div>
287                     <div class="col-md-3">
288                         <a href="contact.html" class="thm-btn inverse pull-right">联系我们</a>
289                     </div>
290                 </div>
291             </div>
292         </section>
293 
294         <footer class="footer bg-style" style="background-image:url(images/background/bg-3.jpg);">
295             <div class="container">
296                 <div class="footer-upper">
297                 
298                     <div class="row">
299                         <div class="col-md-3 col-sm-6">
300                             <div class="footer-widget about-widget">
301                                 <a href="#">
302                                     <img src="images/logo/logo2.png" alt="Awesome Image" />
303                                 </a>
304                                 <p>园艺师这个职业,应证了一句老话:“越老越值钱。”初级园艺师,月薪不过千元左右,而高级园艺师月收入都在万元以上。经验老道的园艺师,能熟悉植物生长规律及习性,熟知土壤、气候等因素与植物生长的关系,这些都不是书本上的理论知识可以迅速补充的,需要长时间实践的检验。
305 </p>
306                                 <div class="link_btn">
307                                    <a href="contact.html" style="color:#0F0">联系我们</a>
308                                 </div>
309                             </div>
310                         </div>
311                         <div class="col-md-2 col-sm-6">
312                             <div class="footer-widget quick-links">
313                                 <h3 class="title">我们的服务</h3>
314                                 <ul>
315                                     <li><p>除雪</p></li>
316                                     <li><p>浇灌花园</p></li>
317                                     <li><p>设计草坪</p></li>
318                                     <li><p>景观美化</p></li>
319                                     <li><p>园林种植</p></li>
320                                 </ul>
321                             </div>
322                         </div>
323                         <div class="col-md-3 col-sm-6">
324                             <div class="footer-widget opening-hour">
325                                 <h3 class="title">开放时间</h3>
326                                 <p>下面是我们的开放时间</p>
327                                 
328                                 <ul class="day-time">
329                                     <li><span>周一-周六 &nbsp;:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>08.00 - 17.00 </span></li>
330                                     <li><span>周日 &nbsp;&nbsp;&nbsp;:</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>09.00 - 15.00</span></li>
331                                     <li><span>周五&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>休息</span></li>
332                                 </ul>
333                             </div>
334                         </div>
335                         <div class="col-md-4 col-sm-6">
336                             <div class="footer-widget contact-widget">
337                                 <h3 class="title">留言</h3>
338                                  <div class="default-form-area">
339                                     <form id="contact-form" name="contact_form" class="default-form" action="inc/sendmail.php" method="post">
340                                         <div class="row-10 clearfix">
341                                             <div class="column col-md-6 col-sm-6 col-xs-12">
342                                                 <div class="form-group">
343                                                     <input type="text" name="form_name" class="form-control" value="" placeholder="姓名" required>
344                                                 </div>
345                                             </div>
346                                             
347                                             <div class="column col-md-6 col-sm-6 col-xs-12">
348                                                 <div class="form-group">
349                                                     <input type="text" name="form_phone" class="form-control" value="" placeholder="电话">
350                                                 </div>
351                                             </div>
352                                             
353                                             <div class="column col-md-12 col-sm-12 col-xs-12">
354                                                 <div class="form-group">
355                                                     <textarea name="form_message" class="form-control textarea required" placeholder="信息"></textarea>
356                                                 </div>
357                                             </div>   
358                                             <div class="column col-md-12 col-sm-12 col-xs-12">
359                                                 <div class="form-group">
360                                                     <input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="">
361                                                     <button class="thm-btn thm-color" type="submit" data-loading-text="Please wait...">联系我们</button>
362                                                 </div>
363                                             </div>   
364 
365                                         </div>
366                                     </form>
367                                 </div>
368                             </div>
369                         </div>
370                     </div>
371                 </div>
372                 <!--Footer Bottom-->
373                 <div class="footer-bottom">                    
374                     <div class="pull-left"><div class="copyright-text" style="margin-left:400px;">Copyright &copy; 2017.Company name All rights reserved.
375                     </div>
376                 </div>
377                 </div>
378             </div>
379         </footer>
380 
381 
382 
383     <!-- Scroll Top Button -->
384     <button class="scroll-top tran3s color2_bg">
385         <span class="fa fa-angle-up"></span>
386     </button>
387     <!-- pre loader  -->
388     <div class="preloader"></div>
389 
390         <!-- jQuery js -->
391         <script src="js/jquery.js"></script>
392         <!-- bootstrap js -->
393         <script src="js/bootstrap.min.js"></script>
394         <!-- jQuery ui js -->
395         <script src="js/jquery-ui.js"></script>
396         <!-- owl carousel js -->
397         <script src="js/owl.carousel.min.js"></script>
398         <!-- jQuery validation -->
399         <script src="js/jquery.validate.min.js"></script>
400         <!-- google map -->
401         <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRvBPo3-t31YFk588DpMYS6EqKf-oGBSI"></script> 
402         <script src="js/gmap.js"></script>
403         <!-- mixit up -->
404         <script src="js/wow.js"></script>
405         <script src="js/jquery.mixitup.min.js"></script>
406         <script src="js/jquery.fitvids.js"></script>
407         <script src="js/bootstrap-select.min.js"></script>
408         <script src="js/menuzord.js"></script>
409 
410         <!-- revolution slider js -->
411         <script src="assets/revolution/js/jquery.themepunch.tools.min.js"></script>
412         <script src="assets/revolution/js/jquery.themepunch.revolution.min.js"></script>
413         <script src="assets/revolution/js/extensions/revolution.extension.actions.min.js"></script>
414         <script src="assets/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
415         <script src="assets/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
416         <script src="assets/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
417         <script src="assets/revolution/js/extensions/revolution.extension.migration.min.js"></script>
418         <script src="assets/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
419         <script src="assets/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
420         <script src="assets/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
421         <script src="assets/revolution/js/extensions/revolution.extension.video.min.js"></script>
422 
423         <!-- fancy box -->
424         <script src="js/jquery.fancybox.pack.js"></script>
425         <script src="js/jquery.polyglot.language.switcher.js"></script>
426         <script src="js/nouislider.js"></script>
427         <script src="js/jquery.bootstrap-touchspin.js"></script>
428         <script src="js/SmoothScroll.js"></script>
429         <script src="js/jquery.appear.js"></script>
430         <script src="js/jquery.countTo.js"></script>
431         <script src="js/jquery.flexslider.js"></script>
432         <script src="js/imagezoom.js"></script>    
433         <script src="js/validation.js"></script>
434         <script id="map-script" src="js/default-map.js"></script>
435         <script src="js/custom.js"></script>
436 
437     </div>
438     
439 </body>
440 </html>
441 <script type="text/javascript">
442             document.getElementById("jgsj").onclick = function(){
443             document.getElementById("nr1").style.display="block";
444             document.getElementById("nr2").style.display="none";
445             document.getElementById("nr3").style.display="none";
446             document.getElementById("nr4").style.display="none";
447             document.getElementById("nr5").style.display="none";
448             document.getElementById("nr6").style.display="none";
449             document.getElementById("jgsj").style.color="green";
450             document.getElementById("zs").style.color="black";
451             document.getElementById("hyhl").style.color="black";
452             document.getElementById("cpyh").style.color="black";
453             document.getElementById("jghy").style.color="black";
454             document.getElementById("cc").style.color="black";
455         }
456         
457             document.getElementById("zs").onclick = function(){
458             document.getElementById("nr2").style.display="block";
459             document.getElementById("nr1").style.display="none";
460             document.getElementById("nr3").style.display="none";
461             document.getElementById("nr4").style.display="none";
462             document.getElementById("nr5").style.display="none";
463             document.getElementById("nr6").style.display="none";
464             document.getElementById("jgsj").style.color="black";
465             document.getElementById("zs").style.color="green";
466             document.getElementById("hyhl").style.color="black";
467             document.getElementById("cpyh").style.color="black";
468             document.getElementById("jghy").style.color="black";
469             document.getElementById("cc").style.color="black";
470         }
471         
472             document.getElementById("hyhl").onclick = function(){
473             document.getElementById("nr3").style.display="block";
474             document.getElementById("nr2").style.display="none";
475             document.getElementById("nr1").style.display="none";
476             document.getElementById("nr4").style.display="none";
477             document.getElementById("nr5").style.display="none";
478             document.getElementById("nr6").style.display="none";
479             document.getElementById("jgsj").style.color="black";
480             document.getElementById("zs").style.color="black";
481             document.getElementById("hyhl").style.color="green";
482             document.getElementById("cpyh").style.color="black";
483             document.getElementById("jghy").style.color="black";
484             document.getElementById("cc").style.color="black";
485         }
486         
487             document.getElementById("cpyh").onclick = function(){
488             document.getElementById("nr4").style.display="block";
489             document.getElementById("nr2").style.display="none";
490             document.getElementById("nr3").style.display="none";
491             document.getElementById("nr1").style.display="none";
492             document.getElementById("nr5").style.display="none";
493             document.getElementById("nr6").style.display="none";
494             document.getElementById("jgsj").style.color="black";
495             document.getElementById("zs").style.color="black";
496             document.getElementById("hyhl").style.color="black";
497             document.getElementById("cpyh").style.color="green";
498             document.getElementById("jghy").style.color="black";
499             document.getElementById("cc").style.color="black";
500         }
501         
502             document.getElementById("jghy").onclick = function(){
503             document.getElementById("nr5").style.display="block";
504             document.getElementById("nr2").style.display="none";
505             document.getElementById("nr3").style.display="none";
506             document.getElementById("nr4").style.display="none";
507             document.getElementById("nr1").style.display="none";
508             document.getElementById("nr6").style.display="none";
509             document.getElementById("jgsj").style.color="black";
510             document.getElementById("zs").style.color="black";
511             document.getElementById("hyhl").style.color="black";
512             document.getElementById("cpyh").style.color="black";
513             document.getElementById("jghy").style.color="green";
514             document.getElementById("cc").style.color="black";
515 
516         }
517         
518             document.getElementById("cc").onclick = function(){
519             document.getElementById("nr6").style.display="block";
520             document.getElementById("nr2").style.display="none";
521             document.getElementById("nr3").style.display="none";
522             document.getElementById("nr4").style.display="none";
523             document.getElementById("nr5").style.display="none";
524             document.getElementById("nr1").style.display="none";
525             document.getElementById("jgsj").style.color="black";
526             document.getElementById("zs").style.color="black";
527             document.getElementById("hyhl").style.color="black";
528             document.getElementById("cpyh").style.color="black";
529             document.getElementById("jghy").style.color="black";
530             document.getElementById("cc").style.color="green";
531 
532         }
533         
534         
535     
536 </script>
537 
538 
539 <!--document.getElementById("EleId").style.display="none";
540 document.getElementById("EleId").style.display="inline";
541 -->
 1 441 <script type="text/javascript">
 2 442             document.getElementById("jgsj").onclick = function(){
 3 443             document.getElementById("nr1").style.display="block";
 4 444             document.getElementById("nr2").style.display="none";
 5 445             document.getElementById("nr3").style.display="none";
 6 446             document.getElementById("nr4").style.display="none";
 7 447             document.getElementById("nr5").style.display="none";
 8 448             document.getElementById("nr6").style.display="none";
 9 449             document.getElementById("jgsj").style.color="green";
10 450             document.getElementById("zs").style.color="black";
11 451             document.getElementById("hyhl").style.color="black";
12 452             document.getElementById("cpyh").style.color="black";
13 453             document.getElementById("jghy").style.color="black";
14 454             document.getElementById("cc").style.color="black";
15 455         }
16 456         
17 457             document.getElementById("zs").onclick = function(){
18 458             document.getElementById("nr2").style.display="block";
19 459             document.getElementById("nr1").style.display="none";
20 460             document.getElementById("nr3").style.display="none";
21 461             document.getElementById("nr4").style.display="none";
22 462             document.getElementById("nr5").style.display="none";
23 463             document.getElementById("nr6").style.display="none";
24 464             document.getElementById("jgsj").style.color="black";
25 465             document.getElementById("zs").style.color="green";
26 466             document.getElementById("hyhl").style.color="black";
27 467             document.getElementById("cpyh").style.color="black";
28 468             document.getElementById("jghy").style.color="black";
29 469             document.getElementById("cc").style.color="black";
30 470         }
31 471         
32 472             document.getElementById("hyhl").onclick = function(){
33 473             document.getElementById("nr3").style.display="block";
34 474             document.getElementById("nr2").style.display="none";
35 475             document.getElementById("nr1").style.display="none";
36 476             document.getElementById("nr4").style.display="none";
37 477             document.getElementById("nr5").style.display="none";
38 478             document.getElementById("nr6").style.display="none";
39 479             document.getElementById("jgsj").style.color="black";
40 480             document.getElementById("zs").style.color="black";
41 481             document.getElementById("hyhl").style.color="green";
42 482             document.getElementById("cpyh").style.color="black";
43 483             document.getElementById("jghy").style.color="black";
44 484             document.getElementById("cc").style.color="black";
45 485         }
46 486         
47 487             document.getElementById("cpyh").onclick = function(){
48 488             document.getElementById("nr4").style.display="block";
49 489             document.getElementById("nr2").style.display="none";
50 490             document.getElementById("nr3").style.display="none";
51 491             document.getElementById("nr1").style.display="none";
52 492             document.getElementById("nr5").style.display="none";
53 493             document.getElementById("nr6").style.display="none";
54 494             document.getElementById("jgsj").style.color="black";
55 495             document.getElementById("zs").style.color="black";
56 496             document.getElementById("hyhl").style.color="black";
57 497             document.getElementById("cpyh").style.color="green";
58 498             document.getElementById("jghy").style.color="black";
59 499             document.getElementById("cc").style.color="black";
60 500         }
61 501         
62 502             document.getElementById("jghy").onclick = function(){
63 503             document.getElementById("nr5").style.display="block";
64 504             document.getElementById("nr2").style.display="none";
65 505             document.getElementById("nr3").style.display="none";
66 506             document.getElementById("nr4").style.display="none";
67 507             document.getElementById("nr1").style.display="none";
68 508             document.getElementById("nr6").style.display="none";
69 509             document.getElementById("jgsj").style.color="black";
70 510             document.getElementById("zs").style.color="black";
71 511             document.getElementById("hyhl").style.color="black";
72 512             document.getElementById("cpyh").style.color="black";
73 513             document.getElementById("jghy").style.color="green";
74 514             document.getElementById("cc").style.color="black";
75 515 
76 516         }
77 517         
78 518             document.getElementById("cc").onclick = function(){
79 519             document.getElementById("nr6").style.display="block";
80 520             document.getElementById("nr2").style.display="none";
81 521             document.getElementById("nr3").style.display="none";
82 522             document.getElementById("nr4").style.display="none";
83 523             document.getElementById("nr5").style.display="none";
84 524             document.getElementById("nr1").style.display="none";
85 525             document.getElementById("jgsj").style.color="black";
86 526             document.getElementById("zs").style.color="black";
87 527             document.getElementById("hyhl").style.color="black";
88 528             document.getElementById("cpyh").style.color="black";
89 529             document.getElementById("jghy").style.color="black";
90 530             document.getElementById("cc").style.color="green";
91 531 
92 532         }
93 533         
94 534         
95 535     
96 536 </script>

原文地址:https://www.cnblogs.com/jc535201285/p/6729241.html