jquery随笔--控件的隐藏显示

最新推荐文章于 2022-04-07 18:54:01 发布

原创最新推荐文章于 2022-04-07 18:54:01 发布 · 599 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #隐藏显示

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现元素显示与隐藏切换效果的方法。通过点击按钮触发元素的淡入淡出动画，达到交互式的显示隐藏效果。示例中包含了两个按钮分别用于控制不同段落文本的显示与隐藏。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var i=0;
$("#but1").click(function(){
    i++;
    if (i%2==0) {
        $("#p1").show(1000);
    } else {
        $("#p1").hide(1000);
    }
});
//效果同上
$("#but2").click(function(){
      $(".p2").toggle(1000);
   });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p id="p1">This is a paragraph.</p>
<p class="p2">This is another paragraph.</p>
<button type="button" id="but1">隐藏/显示p1</button>
<button type="button" id="but2">隐藏/显示p2</button>
</body>
</html>