快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

js显示和隐藏DIV的方法

这篇文章主要为大家详细介绍了js显示和隐藏DIV的方法，文中示例代码介绍的非常详细，图文详解容易学习，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。

成都创新互联公司是专业的曲靖网站建设公司，曲靖接单;提供网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行曲靖网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

  1.    
  2.    
  3.     
  4.    
  5.    
  6.    
  7.    
  8.    
  9.    
  10.    
  11.    
  12.  
  13.  
  14.  
  15.  
  16.    
  17.     
 
  •    
  • 居中的DIV   
  •    
  •    

    •  

     

    下面是更多参考资料：

     

    1.  
    2.  
    3.  
    4. div隐藏与显示 
    5.  
    6. #menus { 
    7.        background-color: #c4cff0;       
    8.       } 
    9.  
    10.  
    11. function Layer_HideOrShow(cur_div) 
    12. { var current=document.getElementById(cur_div); 
    13.    if(current.style.visibility=="hidden") 
    14.      { 
    15.        current.style.visibility ="visible"; 
    16.      } 
    17.    else 
    18.     { 
    19.       current.style.visibility ="hidden"; 
    20.     } 
    21. } 
    22.  
    23.  
    24.  
    25.  
    26.  
    27.  
    28.     
    29.     
    30.  
    31.  
    32.     
    33.     
    34.      
    35.       
    36.        
    37.       
    38.      
    39.    
     
  •  
  •  
  •  
  •  
  • ==================== 
  •  
  •  
  •  
  • 无标题文档 
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    •  
  • 居中的DIV 
  •  
  •  
  • ======================= 
  • 3.javascript 控制 html元素 显示/隐藏 
  •  
  • 1。编写js函数 
  •  
  •  
  •  
  •    function display(id){ 
  •  
  •        var traget=document.getElementById(id); 
  •         if(traget.style.display=="none"){ 
  •                 traget.style.display=""; 
  •         }else{ 
  •                 traget.style.display="none"; 
  •       } 
  •    } 
  •  
  •  
  • 2. 要显示/隐藏的html元素加上 id 属性 
  •  
  •  
  •  
  •         
  •  
  •        
    •  
  •  
  •    
    •  
  •  
  • 控制这个tr的显示/隐藏
     
  •  
  • 3，添加按钮，链接等触发 js 函数 
  •  
  •  
  •  
  • 显示/隐藏 
  •  
  • javascript显示隐藏层广告 
  •  
  •  
  •  
  • function 函数{ 
  • if(thisdiv.style.display=='none'){  
  • thisdiv.style.display="" 
  • } 
  • else 
  • thisdiv.style.display="none" 
  • } 
  •  
  • 你先给div 取个ID=“AA”thisdiv=AA 
  •  
  • javascript隐藏/显示表单对象 
  • javascript隐藏/显示表单对象  
  • [SCRIPT language=JavaScript] 
  • function expandIt(el) { 
  •      whichEl =document.getElementById(el) 
  •      if (whichEl.style.display ==   'none') { 
  •       whichEl.style.display   = ''; 
  •      } 
  •      else { 
  •       whichEl.style.display   = 'none'; 
  •      } 
  •      } 
  •    
  • [/SCRIPT] 
  •  
  • el是对象的id，不管是tr或者table等等先设置一下id，然后进行调用。 
  •  
  • 例： 
  •  
  • [a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a] 
  •  
  • [tr id="ttchild"][td width="18"]Example[/td][/tr] 
  •  
  • 使用时把[]变成<> 
  •  
  • javascript控制页面控件隐藏显示的两种方法 
  •  
  • javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 
  • 方法一： 
  • document.all["PanelSMS"].style.visibility="hidden";  
  • document.all["PanelSMS"].style.visibility="visible"; 
  • 方法二： 
  • document.all["PanelSMS"].style.display="none";  
  • document.all["PanelSMS"].style.display="inline"; 
  • 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static 
  • 方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic 
  •  
  •  
  •  
  •  
  •  
  • ==================== 
  •  
  • 这个方法来我是从一个boblog模板上找到的，其实网络上也可以搜索到；只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能：防刷、收缩侧栏、复制加版权》的效果要好，纯css隐藏div会刷新页面，但用js就不会了。 
  •  
  • 　js代码如下，新建一个txt文件，复制进去，保存并修改文件后缀为js（例open.js）即可。我是把这个文件放在zblog的SCRIPT文件夹里，这里js比较多…… 
  •  
  •  程序代码function showhidediv(id){ 
  •    try{ 
  •      var sbtitle=document.getElementById(id); 
  •      if(sbtitle){ 
  •        if(sbtitle.style.display=='block'){ 
  •          sbtitle.style.display='none'; 
  •        }else{ 
  •          sbtitle.style.display='block'; 
  •        } 
  •      } 
  •    }catch(e){} 

    • 看完上诉内容，你们掌握js显示和隐藏DIV的方法了吗？如果想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


    当前题目：js显示和隐藏DIV的方法
    文章网址：http://6mz.cn/article/jsggid.html

    其他资讯