MyException - 我的异常网
当前位置:我的异常网» JavaScript » 如何用JS控制多个DIV的显示和隐藏有关问题

如何用JS控制多个DIV的显示和隐藏有关问题(2)

www.myexceptions.net  网友分享于:2013-04-10  浏览:229次

        var d=document.getElementById(id);
        if(d){
            d.style.display=d.style.display=="none"?"block":"none";
        }
    }
</script>

------解决方案--------------------
一种是document.getElementById(id),然后一个一个设置隐藏,优点是能够控制你想隐藏的div。
另一种是document.getElementsByTagName(div),这种是将全部的div取出来,然后设置所有的隐藏,要想显示部分的div的话,就要结合第一种方法,将你准备显示的div取到,然后设置成显示。
但是,我更倾向于使用jquery,把你需要隐藏的div class设置为同一个,这个class有没有都没关系,然后使用$(".你设置的class名称").attr("display",true);就行了。
------解决方案--------------------
ID 必须唯一

如果同类div 有多个,可以用自定义属性

document.getElementsByTagName(div) 获取div 列表
getAttribute("key"); 获取属性值

循环判断一下就可以
------解决方案--------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#DH").click(function(){
$("#testD").hide();
});
$("#DS").click(function(){
$("#testD").show();
});
$("#VH").click(function(){
$("#testV").hide();
});
$("#VS").click(function(){
$("#testV").show();
});
$("#EH").click(function(){
$("#testE").hide();
});
$("#ES").click(function(){
$("#testE").show();
});
})
</script>
<input type="button" id="DH" value="testD隐藏"/>
<input type="button" id="DS" value="testD显示"/>
<input type="button" id="VH" value="testV隐藏"/>
<input type="button" id="VS" value="testV显示"/>
<input type="button" id="EH" value="testE隐藏"/>
<input type="button" id="ES" value="testE显示"/>

<div  id="testD" class="lsoftware-summary ztfontcolorx">
 <UL class="clearfix">
   <ul>
     <li class="lbianhao">246456991</li>
   </ul> 
   <LI class="lmingcheng"> 返回山东分公司阿飞噶地方噶的噶业循环冷却水中游离氯和总氯的测定 N,N--二乙基--1,4--苯二胺分光光度法 啊啊啊 
 </LI>
   <LI class="lbumen">阿斯顿发送到</LI>
   <LI class="lriqi">2001-06-01</LI>
   <LI class="lzhuangtai">即将实施</LI>
 </UL>
 </div>
 
 <!--<div  id="testD" class="lsoftware-summary ztfontcolorx1">//你这样写有问题,必须把这个DIV放在第一个DIV里面
 <UL class="clearfix">
   <ul>
     <li class="lbianhao">541991</li>
   </ul> 
   <LI class="lmingcheng"> 阿斯顿噶是的请问而气温打发鬼地方是打发似的</LI>
   <LI class="lbumen">阿斯顿发</LI>
   <LI class="lriqi">2001-06-01</LI>
   <LI class="lzhuangtai">即将实施</LI>
 </UL>
 </div>-->
 

<div class="lsoftware-summary ztfontcolorj" id="testV">
 <UL class="clearfix">
   <ul>
     <li class="lbianhao">HG/T 20623-1991</li>
   </ul> 

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有