DOM的排他功能及显示隐藏功能

最新推荐文章于 2022-08-13 16:57:39 发布

weixin_33973600

最新推荐文章于 2022-08-13 16:57:39 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10046415.html

本文介绍使用JavaScript实现按钮的排他功能，即点击任一按钮时，仅该按钮的状态改变，其余保持默认。同时，演示了通过点击按钮控制DIV元素的显示与隐藏效果，增强网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="button" value="努力"/>
<input type="button" value="努力"/>
<input type="button" value="努力"/>
<input type="button" value="努力"/>
<input type="button" value="努力"/>
<input type="button" value="努力"/>
<script>
   // 11 案例：排他功能
    var inputss=document.getElementsByTagName("input");
    for(var i=0;i<inputss.length;i++){
        //为每个按钮都注册点击事件
        inputss[i].onclick=function () {
            //把所有的按钮的value都设置为默认的值
          for(var j=0;j<inputss.length;j++){
              inputss[j].value="努力";
          }
            //当前被点击的按钮设置
          this.value="努力吧，少年";
        };
    }
</script>

<input type="button" value="隐藏" id="dv"/>
<div id="dh" class="cls"></div>
<script>
    //18:点击按钮，显示和隐藏
    dfObj("dv").onclick=function () {
        if(this.value=="隐藏"){
            dfObj("dh").style.display="none";//隐藏
            this.value="显示";
        }else if(this.value=="显示"){
            dfObj("dh").style.display="block";//显示
            this.value="隐藏";
        }
    };
    //或者
    dfObj("dv").onclick=function(){
      if(dfObj("dh").className!="cls"){
          dfObj("dh").className="cls";
          this.value="显示";
      }else {
          dfObj("dh").className="";
          this.value="隐藏";
      }
    };
</script>