jq点击切换隐藏显示

先引入jquery.js



点击自动切换显示或隐藏

.hidden {

display:none;

}

.block {

display:block;

}

<button style="display:none;"></button>/默认隐藏* */

<p>123456789</p>

在加入代码：

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $("p").toggle(1000);//括号内数字控制显示或隐藏的过渡效果，不填则无过渡效果

  });

});

</script>

点击显示或隐藏单独写

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $("p").hide();//隐藏

  });

  $("button").click(function(){

  $("p").show();//显示

  });

});

</script>

通过class控制

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").removeClass("hidden");//添加class

  });

});

</script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").addClass("block ");//去掉class

  });

});

</script>