用JavaScript实现点击左侧列表右侧显示列表内容的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <!-- mobile responsive meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="fonts/flaticon.css" /> <style type="text/css">
.outer-box{
display:none
}
.hand{
cursor:pointer
}
#nr1{
display:none
}
#jgsj{
color:green
}
</style> </head> <body>
<!-- Menu -->
<section class="theme_menu stricky">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="main-logo">
<a href="index.html"><img src="data:images/logo/logo.png" alt=""></a>
</div>
</div>
<div class="col-md-5 menu-column" style="margin-left:200px">
<nav class="menuzord" id="main_menu">
<ul class="menuzord-menu">
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="service.html">服务详情</a></li>
<li><a href="service-single.html">服务列表</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul> <!-- End of .menuzord-menu -->
</nav> <!-- End of #main_menu -->
</div>
</div>
</div> <!-- End of .conatiner -->
</section> <!-- End of .theme_menu --> <!--Page Title-->
<section class="page-title">
<div class="container">
<div class="row clearfix">
<div class="col-md-6 col-sm-6 col-xs-12 pull-left">
<h1>服务列表</h1>
<p>下面是我们服务的各项内容</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 pull-right text-right path"><a href="index.html">主页</a> / <a href="#">服务列表</a></div>
<div class="overlay"></div>
</div>
</div>
</section>
<!--Page Title Ends--> <section class="service-single">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="service-sidebar">
<ul class="service-catergory">
<li id="jgsj" class="hand"><span class="icon-left fa fa-chevron-right"></span>景观设计</li>
<li id="zs" class="hand"><span class="icon-left fa fa-chevron-right"></span>植树</li>
<li id="hyhl" class="hand"><span class="icon-left fa fa-chevron-right"></span>花园护理</li>
<li id="cpyh" class="hand" ><span class="icon-left fa fa-chevron-right"></span>草坪养护</li>
<li id="jghy" class="hand"><span class="icon-left fa fa-chevron-right"></span>浇灌花园</li>
<li id="cc" class="hand"><span class="icon-left fa fa-chevron-right"></span>除草</li>
</ul>
</div>
</div> <div class="col-md-8 col-sm-12 col-xs-12">
<div id="nr1" class="outer-box" style="display:block">
<div class="img-box"><img src="data:images/resources/service-1.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>景观设计</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div>
</div> <div id="nr2" class="outer-box">
<div class="img-box"><img src="data:images/resources/service-2.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>植树</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div> </div> <div id="nr3" class="outer-box">
<div class="img-box"><img src="data:images/resources/service-3.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>花园护理</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div>
</div> <div id="nr4" class="outer-box">
<div class="img-box"><img src="data:images/resources/service-4.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>草坪养护</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div>
</div> <div id="nr5" class="outer-box">
<div class="img-box"><img src="data:images/resources/service-3.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>浇灌花园</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div>
</div> <div id="nr6" class="outer-box">
<div class="img-box"><img src="data:images/resources/service-2.jpg" alt=""></div> <div class="content-box">
<div class="sec-title">
<h4>除草</h4>
</div> <div class="text">
<p>风景园林规划设计（景观设计）[1] 要素包括自然景观要素和人工景观要素。其中自然景观要素主要是指自然风景，如大小山丘、古树名木、石头、河流、湖泊、海洋等。人工景观要素主要有文物古迹、文化遗址、园林绿化、艺术小品、商贸集市、建构筑物、广场等。</p>
</div> <div class="text style-two">
<p>这些景观要素为创造高质量的城市空间环境提供了大量的素材，但是要形成独具特色的城市景观，必须对各种景观要素进行系统组织，并且结合风水使其形成完整和谐的景观体系，有序的空间形态。</p>
</div>
<div class="row clearfix">
<div class="col-md-6 col-sm-6">
<h4>主要服务</h4>
<p>景观设计主要服务于：城市景观设计（城市广场、商业街、办公环境等）、居住区景观设计、城市公园规划与设计、滨水绿地规划设计、旅游度假区与风景区规划设计等。</p>
</div>
<div class="col-md-6 col-sm-6">
<h4>近代时期</h4>
<p>中国传统符号种类很多，有中国传统的吉祥物：青龙、白虎、朱雀、玄武、凤、貔貅、双鱼、蝙蝠、玉兔等；有五行的金、木、水、火、土；还有中国传统的宝相植物：牡丹、荷花、石榴、月季、松、竹、梅等。在“新中式”景观设计中采用以上传统符号用抽象或简化的手法来体现中国传统文化内涵，运用形式多种多样，可镶刻于景墙、大门、廊架、景亭、地面铺装、座凳上；或以雕塑小品的形式出现；或与灯饰相结合。</p>
</div>
</div> </div>
</div>
</div>
</div>
</div>
</section> <!--call-to-action section-->
<section class="call-to-action subscribe-intro">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3>及早联系园艺师</h3>
<p>园艺师会给你一些最好的意见和建议</p>
</div>
<div class="col-md-3">
<a href="contact.html" class="thm-btn inverse pull-right">联系我们</a>
</div>
</div>
</div>
</section> <footer class="footer bg-style" style="background-image:url(images/background/bg-3.jpg);">
<div class="container">
<div class="footer-upper"> <div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-widget about-widget">
<a href="#">
<img src="data:images/logo/logo2.png" alt="Awesome Image" />
</a>
<p>园艺师这个职业，应证了一句老话：“越老越值钱。”初级园艺师，月薪不过千元左右，而高级园艺师月收入都在万元以上。经验老道的园艺师，能熟悉植物生长规律及习性，熟知土壤、气候等因素与植物生长的关系，这些都不是书本上的理论知识可以迅速补充的，需要长时间实践的检验。
</p>
<div class="link_btn">
<a href="contact.html" style="color:#0F0">联系我们</a>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="footer-widget quick-links">
<h3 class="title">我们的服务</h3>
<ul>
<li><p>除雪</p></li>
<li><p>浇灌花园</p></li>
<li><p>设计草坪</p></li>
<li><p>景观美化</p></li>
<li><p>园林种植</p></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget opening-hour">
<h3 class="title">开放时间</h3>
<p>下面是我们的开放时间</p> <ul class="day-time">
<li><span>周一-周六 :</span> <span>08.00 - 17.00 </span></li>
<li><span>周日 :</span> <span>09.00 - 15.00</span></li>
<li><span>周五 :</span> <span>休息</span></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="footer-widget contact-widget">
<h3 class="title">留言</h3>
<div class="default-form-area">
<form id="contact-form" name="contact_form" class="default-form" action="inc/sendmail.php" method="post">
<div class="row-10 clearfix">
<div class="column col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<input type="text" name="form_name" class="form-control" value="" placeholder="姓名" required>
</div>
</div> <div class="column col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<input type="text" name="form_phone" class="form-control" value="" placeholder="电话">
</div>
</div> <div class="column col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<textarea name="form_message" class="form-control textarea required" placeholder="信息"></textarea>
</div>
</div>
<div class="column col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="">
<button class="thm-btn thm-color" type="submit" data-loading-text="Please wait...">联系我们</button>
</div>
</div> </div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Footer Bottom-->
<div class="footer-bottom">
<div class="pull-left"><div class="copyright-text" style="margin-left:400px;">Copyright © 2017.Company name All rights reserved.
</div>
</div>
</div>
</div>
</footer> <!-- Scroll Top Button -->
<button class="scroll-top tran3s color2_bg">
<span class="fa fa-angle-up"></span>
</button>
<!-- pre loader -->
<div class="preloader"></div> <!-- jQuery js -->
<script src="js/jquery.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- jQuery ui js -->
<script src="js/jquery-ui.js"></script>
<!-- owl carousel js -->
<script src="js/owl.carousel.min.js"></script>
<!-- jQuery validation -->
<script src="js/jquery.validate.min.js"></script>
<!-- google map -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRvBPo3-t31YFk588DpMYS6EqKf-oGBSI"></script>
<script src="js/gmap.js"></script>
<!-- mixit up -->
<script src="js/wow.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/menuzord.js"></script> <!-- revolution slider js -->
<script src="assets/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/revolution/js/extensions/revolution.extension.video.min.js"></script> <!-- fancy box -->
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.polyglot.language.switcher.js"></script>
<script src="js/nouislider.js"></script>
<script src="js/jquery.bootstrap-touchspin.js"></script>
<script src="js/SmoothScroll.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.countTo.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/imagezoom.js"></script>
<script src="js/validation.js"></script>
<script id="map-script" src="js/default-map.js"></script>
<script src="js/custom.js"></script> </div> </body>
</html>
<script type="text/javascript">
document.getElementById("jgsj").onclick = function(){
document.getElementById("nr1").style.display="block";
document.getElementById("nr2").style.display="none";
document.getElementById("nr3").style.display="none";
document.getElementById("nr4").style.display="none";
document.getElementById("nr5").style.display="none";
document.getElementById("nr6").style.display="none";
document.getElementById("jgsj").style.color="green";
document.getElementById("zs").style.color="black";
document.getElementById("hyhl").style.color="black";
document.getElementById("cpyh").style.color="black";
document.getElementById("jghy").style.color="black";
document.getElementById("cc").style.color="black";
} document.getElementById("zs").onclick = function(){
document.getElementById("nr2").style.display="block";
document.getElementById("nr1").style.display="none";
document.getElementById("nr3").style.display="none";
document.getElementById("nr4").style.display="none";
document.getElementById("nr5").style.display="none";
document.getElementById("nr6").style.display="none";
document.getElementById("jgsj").style.color="black";
document.getElementById("zs").style.color="green";
document.getElementById("hyhl").style.color="black";
document.getElementById("cpyh").style.color="black";
document.getElementById("jghy").style.color="black";
document.getElementById("cc").style.color="black";
} document.getElementById("hyhl").onclick = function(){
document.getElementById("nr3").style.display="block";
document.getElementById("nr2").style.display="none";
document.getElementById("nr1").style.display="none";
document.getElementById("nr4").style.display="none";
document.getElementById("nr5").style.display="none";
document.getElementById("nr6").style.display="none";
document.getElementById("jgsj").style.color="black";
document.getElementById("zs").style.color="black";
document.getElementById("hyhl").style.color="green";
document.getElementById("cpyh").style.color="black";
document.getElementById("jghy").style.color="black";
document.getElementById("cc").style.color="black";
} document.getElementById("cpyh").onclick = function(){
document.getElementById("nr4").style.display="block";
document.getElementById("nr2").style.display="none";
document.getElementById("nr3").style.display="none";
document.getElementById("nr1").style.display="none";
document.getElementById("nr5").style.display="none";
document.getElementById("nr6").style.display="none";
document.getElementById("jgsj").style.color="black";
document.getElementById("zs").style.color="black";
document.getElementById("hyhl").style.color="black";
document.getElementById("cpyh").style.color="green";
document.getElementById("jghy").style.color="black";
document.getElementById("cc").style.color="black";
} document.getElementById("jghy").onclick = function(){
document.getElementById("nr5").style.display="block";
document.getElementById("nr2").style.display="none";
document.getElementById("nr3").style.display="none";
document.getElementById("nr4").style.display="none";
document.getElementById("nr1").style.display="none";
document.getElementById("nr6").style.display="none";
document.getElementById("jgsj").style.color="black";
document.getElementById("zs").style.color="black";
document.getElementById("hyhl").style.color="black";
document.getElementById("cpyh").style.color="black";
document.getElementById("jghy").style.color="green";
document.getElementById("cc").style.color="black"; } document.getElementById("cc").onclick = function(){
document.getElementById("nr6").style.display="block";
document.getElementById("nr2").style.display="none";
document.getElementById("nr3").style.display="none";
document.getElementById("nr4").style.display="none";
document.getElementById("nr5").style.display="none";
document.getElementById("nr1").style.display="none";
document.getElementById("jgsj").style.color="black";
document.getElementById("zs").style.color="black";
document.getElementById("hyhl").style.color="black";
document.getElementById("cpyh").style.color="black";
document.getElementById("jghy").style.color="black";
document.getElementById("cc").style.color="green"; } </script> <!--document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";
-->
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>
用JavaScript实现点击左侧列表右侧显示列表内容的方法的更多相关文章
- 2018-8-10-WPF-鼠标移动到列表上-显示列表图标
title author date CreateTime categories WPF 鼠标移动到列表上 显示列表图标 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...
- dede模版列表调用文章正文内容的方法
在制作织梦模板的时候,有的时候我们需要调用文章部分内容,用[field:description/]标签字数不够多(数据库设计字段是varchar(255)的),另外修改了文章内容但是摘要还需要手动修改 ...
- 设置Nginx以列表方式显示网站内容
服务器目录内容: 访问该页面时,将所有文件和目录按列表方式显示 nginx配置文件
- C# 窗体 类似framest 左侧点击右侧显示 左侧菜单右侧显示
首先托一个splitContainer调节大小位置 然后进行再新创建一个窗体名为add 在左侧拖入button按钮 进入代码阶段 更改属性 public Main() { InitializeComp ...
- 关于ubuntu16.4 中安装最新的eclipse或者是STS出现页面特卡，且新建项目没有提示，preference选项中点击左侧标签右侧没反应的解决办法，参照google， 排版不太好，希望对一些小伙伴有所帮助
up vote21down votefavorite 12 Eclipse was working as good as anything on 14.04. I did a clean instal ...
- 当chm文档点击左侧，右侧无内容时的解决方案
右击chm文件->属性->安全选项卡,选择你登陆计算机的用户名,把权限改成完全控制就可以显示了
- JavaScript or jQuery 获取option value值 以及文本内容的方法
1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...
- NeHe OpenGL教程 第十二课：显示列表
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- JS实现点击参数面板按钮显示或隐藏数据
当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
随机推荐
- redis 系列1 linux下安装说明
一. 安装环境 操作系统:centos 7 ,redis版本4.06,客户端windows 7 ,vs2015. 1.1 安装前的条件 yum -y install gcc-c++ 判断是否安装了gc ...
- mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)
一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...
- solr7.3.1在CentOS7上的安装
1 solr的下载 从Solr官方网站(http://archive.apache.org/dist/lucene/solr/7.3.1/ )下载Solr最新版本, 根据Solr的运行环境,Linux ...
- springboot Aop 统一处理Web请求日志
1.增加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 纸上谈兵: 堆 (heap)
纸上谈兵: 堆 (heap) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 堆(heap)又被为优先队列(priority ...
- Windows编程之模块遍历(C++实现)
Windows编程之模块遍历 PS: 主要扣代码使用,直接滑动到最下面使用. 遍历模块需要几个API,和一个结构体 1.创建进程快照 2.遍历首次模块 3.继续下次遍历 4.模块信息结构体 API 分 ...
- MySQL中间件之ProxySQL(8)：SQL语句的重写规则
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.为什么要重写SQL语句 ProxySQL在收到前端发送来的SQL语 ...
- 《C#并发编程经典实例》学习笔记-关于并发编程的几个误解
误解一:并发就是多线程 实际上多线程只是并发编程的一种形式,在C#中还有很多更实用.更方便的并发编程技术,包括异步编程.并行编程.TPL 数据流.响应式编程等. 误解二:只有大型服务器程序才需要考虑并 ...
- 第一册：lesson seventy seven。
原文:terrible toothache. Good morning Mr.Croft. Good morning nurse. I want to see the dentist,please. ...
- eclipse下SpringMVC+Maven+Mybatis+MySQL项目搭建
这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 接下来马上进入项目搭建 ...