ESP8266 HTML按钮的三种形式隐藏和显示

最新推荐文章于 2022-10-03 22:55:50 发布

梅晌

最新推荐文章于 2022-10-03 22:55:50 发布

阅读量1k

点赞数

分类专栏： Arduino Esp8266

本文链接：https://blog.csdn.net/weixin_44301884/article/details/101330444

版权

Esp8266 同时被 2 个专栏收录

9 篇文章 6 订阅

订阅专栏

Arduino

7 篇文章 2 订阅

订阅专栏

ESP8266 HTML按钮的三种形式隐藏和显示

一，两个按钮隐藏一个

<html>
<head>
<script type="text/javascript"src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
</head>
<body><center>
	<button id="a">open</button>
	<button id="b">close</button>
	</center>
<script>
	$("#b").hide();
   $(document).ready(function()
   {
    $("#a").click(function()
    {
     $("#a").hide();
     $("#b").show();
    });
     $("#b").click(function()
    {
     $("#b").hide();
     $("#a").show();
    }
    );
   });
</script>
</body>
</html>

二，两个按钮隐藏一个的另一种形式

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body><center>
	<button class="btn1">隐藏</button>
	<button class="btn0">显示</button>
</center>
</body>
<script type="text/javascript">
	
    var btn1 = document.getElementsByClassName('btn1')[0];
    var btn0 = document.getElementsByClassName('btn0')[0];
    btn0.style.display = 'none';
    function out(){
    btn1.onclick = function(){
    btn1.style.display = 'none';
    btn0.style.display = 'block';

    btn0.onclick = function(){
    btn1.style.display = 'block';
    btn0.style.display = 'none';
    
    out();  }}}  out();
</script>
</html>

三，一个按钮改变按钮value

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>click count test</title>
    <script type="text/javascript">
        window.onload = function(){
            var i = 1;
            document.getElementById("btn").onclick = function(){
            document.getElementById("log").innerHTML += i++;
                 if(i %2==0){  
                 btn.value = "Open";}
                 if(i %2==1){  
                 	btn.value = "Close";}
            }
        }
    </script>
    
</head>
<body><center>
    <input type="button" id="btn" value="Close" style="font-size: 20px;"/>
    <div id="log"type="text" ></div></center>
  
</body>
</html>

梅晌

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ESP8266 HTML按钮的三种形式隐藏和显示

ESP8266 HTML按钮的三种形式隐藏和显示一，两个按钮隐藏一个<html><head><script type="text/javascript"src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10....
复制链接

扫一扫