jq点击切换隐藏显示

最新推荐文章于 2025-06-24 10:55:52 发布

原创最新推荐文章于 2025-06-24 10:55:52 发布 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

博客围绕jQuery进行，核心是利用其实现元素的显示与隐藏切换功能，这在前端页面交互中十分实用，能提升用户体验，属于前端开发领域的常见操作。

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

先引入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>