【jQuery】鼠标点击事件

最新推荐文章于 2024-01-21 20:09:39 发布

牛哞哞杂记

最新推荐文章于 2024-01-21 20:09:39 发布

阅读量504

点赞数

分类专栏： JavaScript+html+css 文章标签： jquery js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_40558766/article/details/108297396

版权

JavaScript+html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用jQuery实现鼠标点击事件，想实现的功能是，点击按钮，出现文字提示。
用JavaScript也可以实现，但用jQuery实现更为方便，就用jQuery了。如下图
在这里插入图片描述

简而言之，就是用两个样式去控制，初始设置文本为隐藏，点击按钮的时候设置显示，再次点击按钮就讲其设置为隐藏。

代码如下：

<html>
<head>
<h1>点击按钮样式</h1>
<style type="text/css">
	.content{
		display: none;
	}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".btn").click(function(){
		var  flg = $(".content").is(":hidden");
		if(flg){
			$(".content").show();
		}else{
			$(".content").hide();
		}
	});
	})
</script>
</head>
<body>
	
<button class="btn">点击</button>
<span class="content">这里是显示的内容 略略略~</span>
</body>
</html>

完毕~

牛哞哞杂记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】鼠标点击事件

使用jQuery实现鼠标点击事件，想实现的功能是，点击按钮，出现文字提示。用JavaScript也可以实现，但用jQuery实现更为方便，就用jQuery了。如下图简而言之，就是用两个样式去控制，初始设置文本为隐藏，点击按钮的时候设置显示，再次点击按钮就讲其设置为隐藏。代码如下：<html><head><h1>点击按钮样式</h1><style type="text/css"> .content{ display: none;
复制链接

扫一扫

专栏目录