用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如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...
随机推荐
- 深入分析Java I/O的工作机制 （一）
此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...
- 解决Python中PyCharm导入模块时，模块名下出现红色波浪线的问题
在博主第一次在PyCharm中导入模块时,模块名下出现红色波浪线,不影响程序执行,但强迫症忍不了 以下是解决办法 Let's do it ... 进入设置,找到Console下的Python Cons ...
- 根据sockfd获取TCP连接本地地址以及对端地址
摘抄自muduo代码实现. 获取本地地址(LocalAddr): struct sockaddr_in6 sockets::getLocalAddr(int sockfd) { struct sock ...
- alert换行
alert( "视频会议系统开启流程 " + String.fromCharCode(13) + "1. 软件下载之后双击安装即可." + String.fr ...
- sessionStorage 基本使用
sessionStorage 是浏览器数据存储的方法之一,用于临时保存同一窗口的数据,关闭窗口后sessionStorage 的数据将会不存在,它是以 key value 键值对的形式储存. 基本用法 ...
- ZOJ Problem Set - 3713
题意:给定一个字符串,用字符串ASC2码16进制数输出 ,并在前面输出字符串长度的16进制,输出长度的规则是 先输出长度的二进制数的后七位的十六进制(如果左边还有1 则这在后七位前面加上个1再输出 ...
- 《用OpenResty搭建高性能服务端》笔记
概要 <用OpenResty搭建高性能服务端>是OpenResty系列课程中的入门课程,主讲人:温铭老师.课程分为10个章节,侧重于OpenResty的基本概念和主要特点的介绍,包括它的指 ...
- Log4Net在MVC下的配置以及运用线程队列记录异常信息
Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过日志查看系统的运行过程,从而发现系统的问题.日志的作用:将运 ...
- SpringBoot2.0源码分析（四）：spring-data-jpa分析
SpringBoot具体整合rabbitMQ可参考:SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa JpaRepositories自动注入 当项目中存 ...
- easyui combobox 设置滚动条
设置滚动条: 1 panelHeight:200 :设置固定的高度. 2 panelHeight:'auto', panelMaxHeight:200. <input class=" ...