怎么用JS控制多个DIV的显示和隐藏问题

Question

<DIV class="lsoftware-summary ztfontcolorx" id="testD">
<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 class="lsoftware-summary ztfontcolorx" id="testD">
<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> 
  <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 ztfontcolorg" id="testE">
<UL class="clearfix">
  <ul>
    <li class="lbianhao">2655555</li>
  </ul> 
  <LI class="lmingcheng"> 56464阿斯顿法师打发阿斯顿发送到</LI>
  <LI class="lbumen">阿斯顿发</LI>
  <LI class="lriqi">2001-06-01</LI>
  <LI class="lzhuangtai">即将实施</LI>
</UL>
</DIV>
如上，总共有三类div，id分为三类，testD，testV，testE，各类div的个数不一定，我进举了四个div，一页可能有好几个，现在我想用按钮和js来实现点击某一个按钮隐藏某一类div，再点击又显示某一类div
，这个有什么办法实现吗？
div显示

Answer 1

相同类型的div加一个class, 比如你的第一个div就是改成<DIV class="lsoftware-summary ztfontcolorx divA" id="testD"> ,现在你这个div继承了三个类lsoftware-summary、ztfontcolorx和divAjs脚本如下(需要引入jQuery库):$('#btnId').click(function(){   //#btnId是你的按钮的id,你要根据实际替换
         $('.divA').hide();     //或者 $('.divA').show(); 
});这样就可以达到通过按钮控制某一类(如divA)元素的隐藏/显示

Answer 2

说实话没太多时间细看,不过getElementsByTagName(name)这个function可以获取所有div,然后你再按照你的逻辑循环判断吧,应该没问题的.

Answer 3

你一个按钮对应一个ID即可<button type="button" onclick="fun('testD')">testD</button>
<button type="button" onclick="fun('testV')">testV</button>
<button type="button" onclick="fun('testE')">testE</button>
<script type="text/javascript">
    function fun(id){
        //$("#"+id).toggle();//jquery写法
        var d=document.getElementById(id);
        if(d){
            d.style.display=d.style.display=="none"?"block":"none";
        }
    }
</script>

Answer 4

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

Answer 5

ID 必须唯一如果同类div 有多个，可以用自定义属性document.getElementsByTagName(div) 获取div 列表
getAttribute("key"); 获取属性值循环判断一下就可以

Answer 6

<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> 
   <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 ztfontcolorg" id="testE">
 <UL class="clearfix">
   <ul>
     <li class="lbianhao">2655555</li>
   </ul> 
   <LI class="lmingcheng"> 56464阿斯顿法师打发阿斯顿发送到</LI>
   <LI class="lbumen">阿斯顿发</LI>
   <LI class="lriqi">2001-06-01</LI>
   <LI class="lzhuangtai">即将实施</LI>
 </UL>
 </div>

Answer 7

jquery 的hide，show ，sublings

Answer 8

谢谢各位，找到方法了，正如上面shangdaming,xzy21com,real_tecent所说，用document.getElementsByTagName(div)方法实现了多个相同name的div显示和隐藏display属性。谢谢，暂时没用jquery的hide方法。

Answer 9

再提个问题啊，高手，怎么点击同一个按钮循环实现显示和隐藏某些相同name的dv呢？