如何使用js动态显示或隐藏DIV

最新推荐文章于 2022-11-19 15:21:29 发布
最新推荐文章于 2022-11-19 15:21:29 发布
阅读量342 收藏
点赞数
文章标签： javascript ViewUI
在web页面中，经常需要使用select控件来显示div的显示与隐藏，实现这个方法主要用到了setAttribute方法，以下为示例代码： 
<html>
<title>通过选择项显示不同的结果</title>
<head>
<script type="text/JavaScript">
function showdiv()
{
	var doc=document;
	var citytext=doc.getElementById("city").value;
	var div1=doc.getElementById("div1");
	var div2=doc.getElementById("div2");
	var div3=doc.getElementById("div3");
	switch (citytext)
	{
		case "广州":		    
		    div1.setAttribute("style","display");			
			div2.setAttribute("style","display:none");
			div3.setAttribute("style","display:none");
			doc.getElementById("text1").value=citytext;
		    break;
		case "南昌":
		    div1.setAttribute("style","display:none");
			div2.setAttribute("style","display");
			div3.setAttribute("style","display:none");
			doc.getElementById("text2").value=citytext;
			break;
		case "沈阳":
		    div1.setAttribute("style","display:none");
			div2.setAttribute("style","display:none");
			div3.setAttribute("style","display");
			doc.getElementById("text3").value=citytext;
			break;
	}
}
</script>
</head>
<body>
<select title="城市" id="city" οnchange="showdiv()">
<option selected value="广州">广州</option>
<option value="南昌">南昌</option>
<option value="沈阳">沈阳</option>
</select>
<div  id="div1" style="display:none"  >您选择了广东的省会<input type="text" id="text1" value=""/></div>
<div  id="div2" style="display:none"  >您选择了江西的省会<input type="text" id="text2" value=""/></div>
<div  id="div3" style="display:none"  >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>
</body>
</html>
 


                

        

        




    




    

      

        

            

              
                
                  iteye_13202
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JS动态添加div，然后在div中添加元素

				
			

			

				

					创造自我、追求无我
				

				

					04-09
					
					6万+
					
				

			

		

		

			
				
需求：
   组织部中有个这样的需求，根据年份动态显示该年份下的定性指标！
 



我的做法：
        先是放一个空的div，让后根据指标的数据，动态的往div中添加元素。
代码：
 空的div，存放定性指标


     


动态往div中添加元素：


for (var n = 0; n < data.length; n++)
        {

			
		

	



                

              
                



	

		

			

				
					
JS实现各种动态显示隐藏div效果

				
			

			

				

					01-10
				

			

		

		

			
				
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果

			
		

	



                


  
              

                


	

		

			

				
					
js控制div及相关属性

				
			

			

				

					weixin_30905981的博客
				

				

					12-18
					
					110
					
				

			

		

		

			
				
动态创建DIV：vardiv=document.createElement("div");

设置div属性及样式等：

div.title="thisisanewdiv.";

  div.class="newDivClass";


　　div.innerHTML="Testcreateadivelement!";

div...

			
		

	





	

		

			

				
					
js动态添加div

				
			

			

				

					weixin_30525825的博客
				

				

					06-07
					
					667
					
				

			

		

		

			
				
问题
有没有遇到过这样的需求, 在页面上会有不定个input, 点击添加按钮就添加

每次写这玩意好麻烦啊, 把他封装起来, 需要的时候调用就好了
思路
因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收
点击第一行的添加
点击的时候, 将div准备好, 添加到内容div中的第一个
点击每行的添加
将di...

			
		

	



		

			
		



	

		

			

				
					
JS动态设置div样式

				
			

			

				

					落雨心星
				

				

					07-20
					
					4691
					
				

			

		

		

			
				
<script>
   window.onload=function(){
        if("index"=="${requestScope.page}"){
            document.getElementById("index").className="active";
        }
</script>

如上，js利用id获取div对象，对...

			
		

	





	

		

			

				
					
JQuery DIV 动态隐藏和显示的方法

				
			

			

				

					10-22
				

			

		

		

			
				
1. **在页面加载时隐藏DIV**  在描述中提到的`<head>`部分定义了一个名为`HideWeekMonth`的函数，该函数通过`$("#tt1").hide()`和`$("#tt2").hide()`来隐藏ID为`tt1`和`tt2`的两个DIV。然后在`<body>`标签的`onLoad`...

			
		

	





	

		

			

				
					
javascript实现div的显示和隐藏的小例子

				
			

			

				

					10-27
				

			

		

		

			
				
标签“div”、“显示”和“隐藏”明确了讨论的核心内容：如何操作div元素的显示属性以达到隐藏或显示的效果。  部分内容是一个完整的HTML文件，包含了一个按钮（`<input type="button">`）和一个div（`<div id="div1...

			
		

	





	

		

			

				
					
js加载读取内容及显示与隐藏div示例

				
			

			

				

					10-26
				

			

		

		

			
				
这个示例主要用于演示在用户选择特定选项时，根据选择的内容动态显示或隐藏一个div。  首先，让我们分析一下给出的代码：  1. `<script>`标签内定义了一个名为`check`的JavaScript函数。这个函数将在两个情况下被...

			
		

	





	

		

			

				
					
JavaScript  动态隐藏、显示DIV  页面刷新后也不会改变隐藏状态

				
			

			

				

					03-02
				

			

		

		

			
				
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到，当页面刷新时，也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...

			
		

	





	

		

			

				
					
js实现，javascript 动态隐藏、显示div 页面刷新后也不会改变显示或隐藏状态

				
			

			

				

					weixin_44075041的博客
				

				

					11-19
					
					701
					
				

			

		

		

			
				
js实现，javascript 动态隐藏、显示div 页面刷新后也不会改变显示或隐藏状态

			
		

	





	

		

			

				
					
java web jsp 隐藏div（附源码）

				
			

			

				

					01-05
				

			

		

		

			
				
还在为网页中无法控制div的显隐发愁吗，看见这个资源算是你柳暗花明的时刻来了，详解了在页面中怎样隐藏div 让div在你的页面中随心所欲/

			
		

	





	

		

			

				
					
js动态设置div的值

				
			

			

				

					上班搞IT，下班搞ITF。
				

				

					11-11
					
					9591
					
				

			

		

		

			
				
js动态设置div的值.html





    1-10 岁
    11 岁
    12-120 岁
    
  
  
  
  
<!--
function ok()
{
  var temp=document.getElementsByName("radio");
  for (i=0;i<temp.length;i++){
  //遍历Rad

			
		

	





	

		

			

				
					
js动态添加div（一）

				
			

			

				

					Lonely
				

				

					08-13
					
					1万+
					
				

			

		

		

			
				
在一个Div前添加Div

			
		

	





	

		

			

				
					
事件冒泡和捕获

				
			

			

				

					weixin_44021199的博客
				

				

					07-25
					
					247
					
				

			

		

		

			
				
<!-- 
    事件流
    冒泡  从里向外
    捕获  从外向里（ie不支持 ）
    既有捕获 又有冒泡 先捕获 后冒泡（先从外到里  再从里向外）
-->

测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <...

			
		

	





	

		

			

				
					
js点击按钮div显示隐藏

				
			

			

				

					u010234868的专栏
				

				

					06-12
					
					7696
					
				

			

		

		

			
				
<input type="button" value="隐藏" id="btn">
<div id="box"></div>

#box {
	width: 200px;
	height: 200px;
	background-color: red;
}
.show {
	display: block;
}
.hidden {
	display: none;
}

// 获取元素
var btn = document.getElementById('btn');
var 

			
		

	





	

		

			

				
					
简单js控制div的显示与隐藏

					
热门推荐

				
			

			

				

					冰蒂的博客
				

				

					02-24
					
					5万+
					
				

			

		

		

			
				
这样的例子有很多；但是这个最简单最容易理解； 
以下两个页面代码粘贴复制就可以看效果，拿去玩吧！1. div初始隐藏页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/

			
		

	





	

		

			

				
					
JS显示和隐藏div

				
			

			

				

					weixin_44858732的博客
				

				

					06-09
					
					2万+
					
				

			

		

		

			
				
JS显示和隐藏div
接下来我们使用Visual Studio这个软件来写一个的方法，我们可以使用这种写法写一个小案例来实现一个div里面显示和隐藏的效果。
我们先看一下html的页面截图：

首先我们先在html页面上建立一个input标签然后在给他一个id，接着给他一个div设置一个宽高100像素的正方形。然后接着我们就要写一下script的js代码。
看一下js的代码截图：

我们可以看到2...

			
		

	





	

		

			

				
					
web前端,js实现div隐藏显示

				
			

			

				

					翟浩浩Android专栏
				

				

					09-28
					
					4853
					
				

			

		

		

			
				
显示/隐藏


    
        function toggle(targetid){
            if (document.getElementById){
                target=document.getElementById(targetid);
                if (target.style.display=="bl

			
		

	





	

		

			

				
					
html div动态隐藏与显示 不使用dispaly属性

					
最新发布

				
			

			

				

					03-09
				

			

		

		

			
				
可以使用JavaScript来实现动态隐藏与显示，通过改变元素的class属性来控制元素的显示与隐藏。例如，可以定义两个class，一个用于显示元素，一个用于隐藏元素，然后通过JavaScript来切换元素的class属性来实现动态...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值