JS实现点击显示与隐藏

最新推荐文章于 2023-06-06 11:08:51 发布
最新推荐文章于 2023-06-06 11:08:51 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16908489/article/details/56668151
版权 
<html>
<head>
<meta charset="utf-8"/>
<title>点击显示/隐藏</title>
<style type="text/css">
#thediv
{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 background-color:green;
}
</style>
<script type="text/javascript">

function S_h(obj){
if(obj.style.display=='block'){
obj.style.display='none';
}
  
  

   
    
   
   else
  
  

  
  

   
    
   
   {
  
  

  
  

   
     
   
   obj.style.display='block';
  
  

  
  

   
    
   
   }
  
  

}

</script>
</head>
window.onload = function(){

var olink = document.getElemetnById("link");

var td = document.getElemtnById("thediv");

olink.onclick = function(){

S_h(td);

return false;

}

}<body><a href="#" id="link">显示\隐藏切换</a><div id="thediv" style="display:block">显示/隐藏</div></body></html>






                

        

        

    




    

      

        

            

              
                
                  qq_16908489
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
JS制作显示隐藏

				
			

			

				

					weixin_57762662的博客
				

				

					03-08
					
					5595
					
				

			

		

		

			
				
打开DW按下CTRL+N新建一个HTML文档；
	首先我们在body标签里写好两个button（按钮）标签，在button标签里面分别分别写好显示与隐藏两个字，让我们更好的区分，当然我们也要给它们设好两个不同的id名，为我们写JS代码做铺垫；


3. 接下来我在button标签下面新建一个div来做我们要隐藏显示的对象，当然也别忘了也给它一个id，这里我就给它id名叫box；







4. 随后我们创建一个style，然后在里面设置div的样式属性，这里可以自己找个图片来做为隐藏显示对象，我嫌麻..

			
		

	



                

              
                



	

		

			

				
					
原生js实现点击按钮显示/隐藏图片

				
			

			

				

					在热爱技术的路上一直前行。
				

				

					02-26
					
					6447
					
				

			

		

		

			
				
目录结构：



代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    &

			
		

	



                


  
              

                


	

		

			

				
					
JavaScript隐藏元素的5种方法~纯干货分享

				
			

			

				

					weixin_46370867的博客
				

				

					11-29
					
					1万+
					
				

			

		

		

			
				
Hello ~  可爱的小伙伴我们又见面啦。
下面是我和大家分享的JS隐藏元素的5种方法，希望可以帮助到有需要的小伙伴。
让我们一起来看看吧 GO！
第一种
<!DOCTYPE html>
<html lang="en">
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<head>
    <meta charset="UTF-8">

			
		

	





	

		

			

				
					
JavaScript DOM案例 点击按钮实现显示相应列表 多种方法

					
最新发布

				
			

			

				

					modao的博客
				

				

					06-06
					
					1452
					
				

			

		

		

			
				
本文通过不同方法实现一个小的点击触发事件按例，主要注意的是排他思想的使用和、let和var关键字的区别，希望以后能够收益，作为自己经验的积累

			
		

	



		

			
		



	

		

			

				
					
【原生JS实现】搜索框聚焦显示盒子，点击盒子以外的地方，盒子隐藏

				
			

			

				

					DA_ttack的博客
				

				

					05-23
					
					1708
					
				

			

		

		

			
				
点击盒子以外的区域，盒子隐藏

			
		

	





	

		

			

				
					
[css] 元素的隐藏和显示

				
			

			

				

					adisMadman的博客
				

				

					04-20
					
					532
					
				

			

		

		

			
				
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新界面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

一：display属性

display属性用于设置一个元素应如何显示：

display：none；隐藏对象
	display：block；除了转换为块级元素以外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

二：visibility可见性

visibility属性用于指定一个元素应可见还是隐藏

visibility：visible；元素可视
	visib

			
		

	





	

		

			

				
					
js实现简易点击切换显示或隐藏

				
			

			

				

					01-21
				

			

		

		

			
				
本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码，供大家参考，具体内容如下  html:    点击切换显示隐藏  关闭  打开 css:  * {  margin:0;  padding:0; } #header {  width:100%;  height:50px;  ...

			
		

	





	

		

			

				
					
JS实现点击参数面板按钮显示或隐藏数据

				
			

			

				

					08-31
				

			

		

		

			
				
本文主要介绍JS实现点击参数面板按钮显示或隐藏数据的方法，具有很好的参考价值。下面跟着小编一起来看下吧

			
		

	





	

		

			

				
					
JS实现点击链接切换显示隐藏内容的方法

				
			

			

				

					10-19
				

			

		

		

			
				
通过这种方式，我们可以轻松实现点击链接切换显示隐藏内容的功能。当然，这只是一个基础示例，实际应用中可能需要考虑更多的交互细节，如动画效果、防止重复点击等。同时，为了使代码更健壮和可维护，可以考虑使用类...

			
		

	





	

		

			

				
					
javascript点击按钮实现隐藏显示切换效果

				
			

			

				

					10-22
				

			

		

		

			
				
在本例中，我们将探讨如何使用JavaScript实现一个简单的功能，即点击按钮时，实现元素的隐藏与显示的切换效果。  首先，让我们分析提供的代码。整个示例由HTML、CSS和JavaScript三部分组成：  1. HTML部分：  - `<a>...

			
		

	





	

		

			

				
					
JS实现鼠标点击展开或隐藏表格行的方法

				
			

			

				

					12-02
				

			

		

		

			
				
本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法。分享给大家供大家参考。具体实现方法如下：
 代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<t

			
		

	





	

		

			

				
					
js实现的点击超链显示隐藏层

				
			

			

				

					10-30
				

			

		

		

			
				
js实现的点击超链显示隐藏层

			
		

	





	

		

			

				
					
JavaScript点击一个按钮隐藏和显示div

					
热门推荐

				
			

			

				

					Return_KB的博客
				

				

					01-09
					
					3万+
					
				

			

		

		

			
				
本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。

此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。

下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:
01020304050607080910111213141516171819202122232425262728293031323334html>head>meta ch

			
		

	





	

		

			

				
					
JavaScript点击按钮隐藏和显示div方法

				
			

			

				

					u014414110的博客
				

				

					02-26
					
					2万+
					
				

			

		

		

			
				
根据id 按钮获取点击事件，添加事件处理函数
效果：


&lt;style&gt;
		#dv{
			width: 100px;
			height: 100px;
			background-color: royalblue;
		}
	&lt;/style&gt;
	&lt;body&gt;
		&lt;input type="button" value="隐藏" id="btn"/&

			
		

	





	

		

			

				
					
点击自己内容显示和隐藏

				
			

			

				

					sunnyfan的博客
				

				

					11-26
					
					1879
					
				

			

		

		

			
				
**点击自己内容显示和隐藏**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击自己内容显示和隐藏</title>
    <link rel="stylesheet" type="text/css" href="../reset.css">
    <script type="text/

			
		

	





	

		

			

				
					
JS点击显示隐藏内容

				
			

			

				

					
				

				

					12-04
					
					957
					
				

			

		

		

			
				
JS点击显示隐藏密码
思路：获取元素，判断点击，如果DIV显示就隐藏，如果DIV隐藏就显示出来。


1 if(DIV是显示的){
2     div.style.display='none';
3 }
4 else{
5     div.style.display='block';    
6 }



代码：
style:

1 &lt...

			
		

	





	

		

			

				
					
js控制tr显示或者隐藏

				
			

			

				

					zhengqiqiqinqin的专栏
				

				

					03-04
					
					2万+
					
				

			

		

		

			
				
方法一：
document.getElementById("控件ID").style.visibility="hidden";
document.getElementById("控件ID").style.visibility="visible";
方法二：
document.getElementById("控件ID").style.display="none";
document.get

			
		

	





	

		

			

				
					
JS实现显示部分文字点击显示全部

				
			

			

				

					笑笑
				

				

					09-16
					
					1万+
					
				

			

		

		

			
				
js显示隐藏层






测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语

			
		

	





	

		

			

				
					
js/jq 点击按钮显示div,点击页面其他任何地方隐藏div

				
			

			

				

					zcy_csdn123的博客
				

				

					05-28
					
					2959
					
				

			

		

		

			
				
https://blog.csdn.net/YangBingX/article/details/78644486

			
		

	





	

		

			

				
					
js实现点击显示和隐藏元素

				
			

			

				

					04-07
				

			

		

		

			
				
可以使用JavaScript的DOM操作来实现点击显示和隐藏元素。具体实现可以通过获取需要操作的元素，添加点击事件监听器，然后在事件处理函数中切换元素的display属性来实现。例如：  HTML代码：  ``` 点击切换 这是需要...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值