提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js点击显示隐藏

JS 显示 点击 隐藏
2023-09-11 14:17:02 时间

这个栗子……

可以不吃，先预设一个变量表示div的状态，例子中0是显示的，一开始是隐藏的。当点击时判断状态是显示0的还是隐藏1的；如果是显示的就把div隐藏，再把变量改变为1。再次点击时把会判断到变量是隐藏的，就会走显示那条路。

<!--
Author: XiaoWen
Create a file: 2016-12-07 10:09:27
Last modified: 2016-12-07 10:21:28
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击显示和隐藏</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background: #eee;
    }
  </style>
</head>
<body>
  <button>
    显示/隐藏
  </button>
  <div>受罪的div，想隐藏就隐藏</div>
  <script>
    var but=document.getElementsByTagName("button");
    var div=document.getElementsByTagName("div");
    var temp=0; //0为显示
    but[0].onclick=function(){
      if(temp==0){ //本来是显示的，所以就隐藏咯
        div[0].style="display:none";
        temp=1; //隐藏了就把状态改变了
      }else{
        div[0].style="display:block";
        temp=0;
      }
    }
  </script>
</body>
</html>

w3c上有个开关灯的例子，是直接判断src路径中的字符来显示不同的图片。

使用取余 % 

    var but=document.getElementsByTagName("button");
    var div=document.getElementsByTagName("div");
    var temp=0; //0为显示
    but[0].onclick=function(){
      if(temp%2==0){ //本来是显示的，所以就隐藏咯
        div[0].style="display:none";
      }else{
        div[0].style="display:block";
      }
      temp++
    }

使用布尔和非

    var but=document.getElementsByTagName("button");
    var div=document.getElementsByTagName("div");
    var b=true;
    but[0].onclick=function(){
      if(b){ 
        div[0].style="display:none";
      }else{
        div[0].style="display:block";
      }
      b=!b //把 true 变为 false 并赋给原来的变量
    }

期待此栗子的更有味的做法。

相似例子：

勾选时显示相应内容：http://www.cnblogs.com/daysme/articles/6140303.html

相关文章