jquery-隐藏和显示

最新推荐文章于 2024-07-30 09:59:07 发布

饭一碗

最新推荐文章于 2024-07-30 09:59:07 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： jquery-隐藏和显示 jquery隐藏显示 toggle hide show

老铁们，没点关注点波关注哈~

本文链接：https://blog.csdn.net/fanrenxiang/article/details/78749836

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery hide() / show()

先上个效果图

通过jquery的hide()show()方法来隐藏/显示html元素

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

(可选的) speed 参数规定隐藏/显示的速度，可取以下值："slow"、"fast" 或毫秒

(可选的) callback 参数是隐藏/显示完成后执行的函数名称

实例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<button type="button" οnclick="hide();">隐藏</button>
<button type="button" οnclick="show();">显示</button>
<br/><br/>
<div id="content">这里是一个动态的段落</div>
<script>
  function hide(){
    $("#content").hide();
  }
  function show(){
    $("#content").show();
  }
</script>
</body>
</html>

jquery toggle()

通过jq的toggle()方法来切换hide()和show()方法，实现的效果是hide和show两者的综合

实例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<button type="button" οnclick="toggle();">隐藏或显示</button>
<br/><br/>
<div id="content">这里是一个动态的段落</div>
<script>
  function toggle(){
    $("#content").toggle();
  }
</script>
</body>
</html>