jquery点击a标签怎么显示和隐藏div?详解

你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧。

1、新建一个html文件,命名test.html,用来讲解jquery点击a标签怎么显示和隐藏div。

jquery点击a标签怎么显示和隐藏div

2、在test.html文件当中,使用div标签创建一个模块,并且,设置div的class属性为aa。

主要用于通过这个class来设置css样式和获得div对象。

jquery点击a标签怎么显示和隐藏div

3、在test.html文件当中,使用css通过类名aa来设置div的样式 ,定义宽度、高度为150px,背景颜色为红色。

jquery点击a标签怎么显示和隐藏div

4、在test.html文件当中,在p标签内,使用a标签创建两个a链接,分别为“隐藏”、“显示”,与此同时,给两个a标签绑定onclick点击事件,在a标签被点击的时候,分别执行ahide()函数和ashow()函数。

jquery点击a标签怎么显示和隐藏div

5、在js标签当中,创建ahide()函数,在函数当中,通过类名aa获得div对象,使用hide()方法将div隐藏不显示。

jquery点击a标签怎么显示和隐藏div

6、在js标签当中,创建ashow()函数,在函数当中,通过类名aa获得div对象,使用show()方法将隐藏的div显示出来。

jquery点击a标签怎么显示和隐藏div

以上的内容你都清楚了吗?更多相关知识,以及java编程常见问题,可以继续通过奇Q工具网来进行了解呢。

推荐阅读:

jquery dialog弹出框居中怎么设置?具体方法详解

jquery ajax请求,使用jquery发送ajax请求怎么编写?

jquery添加html代码,怎样动态的添加一条html代码?