职场小白之隐藏或显示按钮

隐藏或显示按钮总结

一、html隐藏与显示按钮

<!--第一种方法-->
<div>
    <!--display: none 隐藏按钮-->
    <button type="button" style="display: none" >隐藏</button>
    <!--display: block 显示按钮-->
    <button type="button" style="display: block">显示</button>
</div>
<!--第二种方法-->
<div>
    <!--visibility: hidden 隐藏按钮-->
    <button type="button" style="visibility: hidden" >隐藏</button>
    <!--visibility: visible 显示按钮-->
    <button type="button" style="visibility: visible">显示</button>
</div>
<!--第三种方法-->
<div>
    <!--class="hide" 隐藏按钮-->
    <button type="button" class="hide">隐藏</button>
    <!--class="hide" 显示按钮-->
    <button type="button" class="show">显示</button>
</div>

二、js动态隐藏与显示按钮

<div>
    <button type="button" id="hideButton">隐藏</button>
    <button type="button" id="showButton">显示</button>
</div>

<script>
   /* 第一种方法*/
    $('#hideButton').css('visibility','hidden');
    $('#showButton').css('visibility','visible');
   /* 第二种方法*/
   $('#hideButton').css('display','none');
   $('#showButton').css('display','block');
</script>