首页 > 一个按钮实现2个功能

一个按钮实现2个功能

想实现一个功能,页面点击显示按钮的时候 显示数据 ,同时按钮名字变成隐藏;点击隐藏的时候 隐藏数据;


给按钮加一个值,比如 1 和 0

1为显示数据 0 为隐藏数据

每次点击按钮获取这个值,判断是 1 或 0 操作DOM并修改这个值
我用了jquery

<button value='1' onclick="f(this.value)">显示</button>
<p>内容</p>
<script type="text/javascript">
  function f(val){
    if (val=='1') {
      $('button').text('隐藏');
      $('p').css('display','none');
      $('button').attr('value','0');
    }else{
      $('button').text('显示');
      $('p').css('display','block');
      $('button').attr('value','1');
    }
  }
</script>

document.getElementById("buttonId").addEventListener("click",function(){
    if(document.getElementById("divId").style.display!="block"){
        this.innerHTML="隐藏";
        document.getElementById("divId").style.display="block";
    }else{
        this.innerHTML="显示";
        document.getElementById("divId").style.display="none";            
    }
},false);

$("a").toggle(function(){
    $(this).text("隐藏");
    $(target).show();
},function(){
    $(this).text("显示");
    $(target).hide();
});
【热门文章】
【热门文章】