js中标签的显示与隐藏操作hide&show

最新推荐文章于 2025-05-27 08:27:52 发布

原创最新推荐文章于 2025-05-27 08:27:52 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何利用JavaScript中的hide()和show()函数实现文字和控件的显示与隐藏效果，包括速度设置与回调函数的应用。通过实例演示了如何在网页中创建动态交互元素，提供了一个简单的实现方法。

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

某些文字和控件只是想在点击后才显示或隐藏，那么就要用到js中的hide()和show()操作

1.hide()/show()函数

点击后相应控件隐藏，同时slow , normal , fast 设置隐藏的速度，可以试验一下。或者用数字表示，单位毫秒，如“1000”，代表100毫秒，一般根据要显示的内容多少设置速度。

2.jQuery Callback 函数

如果希望在一个涉及动画的函数之后来执行语句，就使用 callback 函数, eg: show("slow",callback());

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>显示隐藏标签</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function popDIV(id){
if("none"==$("#"+id).css("display"))
{
$("#"+id).show("slow",function(){//可以将slow改为数字
alert("暂时没有音乐哦");//如果您希望在一个涉及动画的函数之后来执行语句，就使用 callback 函数。show("",callback());
});
}
else
{
$("#"+id).hide("slow");
}
}
$( document ).ready(function() {
$( ".box" ).click(function( event ) {
alert( "暂时没有完善哦" );
event.preventDefault();
});
});
//两个提示框的实现方法不同哦

</script>
<style>
body{
margin-left:100px;
}
</style>
</head>
<body>
<a onclick="popDIV('div1');" style="cursor:pointer;width:35px;" ><font color="red";size="18px";>隐形的翅膀</font>（点击显示与隐藏）</a>
<br/>
<br/>
<br/>
<br/>
<div id="div1" style="width:250px;">每一次都在徘徊孤单中坚强<br/>
每一次就算很受伤也不闪泪光<br/>
我知道我一直有双隐形的翅膀<br/>
带我飞飞过绝望<br/>
不去想他们拥有美丽的太阳<br/>
我看见每天的夕阳也会有变化<br/>
我知道我一直有双隐形的翅膀<br/>
带我飞给我希望<br/>
我终於看到所有梦想都开花<br/>
追逐的年轻歌声多嘹亮<br/>
我终於翱翔用心凝望不害怕<br/>
哪里会有风就飞多远吧<br/>
-----------music----------<br/>
不去想他们拥有美丽的太阳<br/>
我看见每天的夕阳也会有变化<br/>
我知道我一直有双隐形的翅膀<br/>
带我飞给我希望<br/>
我终於看到所有梦想都开花<br/>
追逐的年轻歌声多嘹亮<br/>
我终於翱翔用心凝望不害怕<br/>
哪里会有风就飞多远吧<br/>
隐形的翅膀让梦恒久比天长<br/>
留一个愿望让自己想像</div>

<br/>
<a class="box">告诉我你的想法吧~~~</a>
<br/>
</body>
</html>