网站的灵魂事设计,设计的灵魂是文化

简单js实现点击按钮显示和隐藏,网站制作中经常用的,很实用

2019-10-09 10:10:49 113

作者:宁波网站建设

本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。此效果还是比较实用的,比如点击按钮可以实现一个功能模块的显示或者隐藏。



JS代码:  

<script>
    function doHide(){
          var oDiv = document.getElementById("divTest");
          var oButton = document.getElementById("btnTest")
          if (oDiv.style.display == "none"){
            oDiv.style.display = "block";
            
          }else {
            oDiv.style.display = "none";
            
          }
        }
       
  </script>

HTML代码:

<input id="btnTest" type="button" value="选择语言" onclick="doHide();"/>

<div id="divTest" style="display: none; width: 100px; border: 1px solid #eee; margin-top: 10px;">
<dd><a href="#">中文</a></dd>
<dd><a href="#">English</a></dd>
</div>

相关文章

友情链接

服务热线

15168586852