用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如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
随机推荐
- 寒假小软件开发记录06--apk生成
先在strings.xml中修改了软件名称,再修改软件图标. 在Android模式下,进入Image Asset,进行图标的修改: android studio中,build->generate ...
- Linux的 Shell 理解和使用
Shell为命令解释器,把用户命令解释为内核可识别的机器语言,然后翻译命令结果给用户,其也是一个强大的编程语言,是解释执行的脚本语言,无编译,与python机制基本相同. Shell内部可以直接调用L ...
- deepin安装docker
deepin在debian的基础上进行了一些修改,因此导致按照debian的安装指引是很难安装上docker的. 最近想学习docker,故尝试了安装docker(个人使用:deepin15.7桌面版 ...
- JSON库的使用研究（三）
怎么选择JSON库? 从整体测试结果来看,总结如下: 用于序列化.反序列的功能,数量量小,吞吐量不大于10000每秒的,选择gson: 用于解析JSON的,还是用Fastjson吧,虽然听说坑很多. ...
- mongo in和not in查询
执行语句 db.getCollection("A表").find( { id:{ $in:[1,2]} } ) 作用:查询A表中id字段等于1和等于2 的记录 改成 id:{ $ ...
- 微信小程序onLaunch异步，首页onLoad先执行?
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执 ...
- 了解Java内存模型，看完这一篇就够了
前言(此文草稿是年前写的,但由于杂事甚多一直未完善好.清明假无事,便收收尾发布了) 年关将近,个人工作学习怠惰了不少.两年前刚做开发的时候,信心满满想看看一个人通过自己的努力,最终能达到一个什么样的高 ...
- API防重放机制
说说API的防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你的请求原封不动地再发送一次,两次...n次,一般正常的请求都会通过验证进入到正常逻辑中,如果 ...
- 深入理解 Java 动态代理机制
Java 有两种代理方式,一种是静态代理,另一种是动态代理.对于静态代理,其实就是通过依赖注入,对对象进行封装,不让外部知道实现的细节.很多 API 就是通过这种形式来封装的. 代理模式结构图(图片来 ...
- 基于.Net进行前端开发的技术栈发展路线（一）
前言 今天想讲讲的是我的技术树.我最初是做CS开发的,第一阶段的技术经历是以Powerbuilder来做CS开发,第二阶段开始基于C#做winform开发,眼看前端开发越来越流行,需要更广泛的技术栈势 ...