用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如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
随机推荐
- Target优化
优化目标主要包括以下几方面: 1 优化平面文件 如果目标平面文件在某机器的共享目录下,则该机器最好是专门用于文件存储的,如果还应用于其他非文件存储任务,则会降低加载效率 如果Integration s ...
- 细读 php json数据和JavaScript json数据
关于JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强 5.容 ...
- RocketMQ事务消息实现分析
这周RocketMQ发布了4.3.0版本,New Feature中最受关注的一点就是支持了事务消息: 今天花了点时间看了下具体的实现内容,下面是简单的总结. RocketMQ事务消息概要 通过冯嘉发布 ...
- ConcurrentHashMap 解读
初始化: 问题:如何当且仅只有一个线程初始化table private final Node<K,V>[] initTable() { Node<K,V>[] tab; int ...
- CentOS7.0小随笔——指令基本操作（Part.B）
一.文件与目录基本操作指令 touch命令 在Linux中,touch指令可以建立一个空文件 但如果创建的文件本身存在(指在同一目录下),则会修改文件最后的访问时间,并不会更改文件内的内容. 例:# ...
- 基于openssl搭建https服务器
1. 搭建web环境 我这里使用源码编译安装方式安装httpd.详情可以参加我的一篇博客http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_1 ...
- python三大神器之virtualenv
virtualenv virtualenv用来管理python项目环境,隔离出一个只属于这个项目的虚拟python环境(windows和Linux用法一样). 首先你需要安装virtualenv模块 ...
- 深入学习主成分分析（PCA）算法原理（Python实现）
一:引入问题 首先看一个表格,下表是某些学生的语文,数学,物理,化学成绩统计: 首先,假设这些科目成绩不相关,也就是说某一科目考多少分与其他科目没有关系,那么如何判断三个学生的优秀程度呢?首先我们一眼 ...
- 基于vue技术的企业移动办公系统的设计与实现
如何打包: http://www.cnblogs.com/smilehuanxiao/p/7693858.html http://www.cnblogs.com/1314y/p/6207153.htm ...
- MyBatis源码解析（十二）——binding绑定模块之MapperRegisty
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6758456.html 1.回顾 之前解析了解析模块parsing,其实所谓的解析模块就是为 ...