多语言展示
当前在线:1207今日阅读:27今日分享:41

jquery实现点击按钮添加和移除class

在jquery中,使用addClass()方法给元素添加class,使用removeClass()方法删除元素的class。下面小编举例讲解jquery实现点击按钮添加和移除class。
工具/原料
1

html+jquery

2

代码编辑器:Zend Studio 8.0.0

方法/步骤
2

在test.html文件内,使用p标签创建一行文字,下面将使用jquery方法给它添加class。

3

为了展示效果,使用css设置一个类名mytest的样式,设置内边距为10px,背景颜色为黄色。

4

在test.html文件内,使用button标签创建两个按钮,一个为添加class按钮,另一个为删除class按钮。

5

在test.html文件内,给两个按钮分别绑定onclick事件,当按钮被点击,分别执行addcss()函数,delcss()函数。

6

在js标签内,分别创建addcss()函数和delcss()函数,在addcss()函数内,通过获得p标签对象,使用addClass()方法给p元素添加mytest类名属性,在delcss()函数内,使用removeClass()方法删除mytest类名属性。

7

在浏览器打开test.html文件,分别点击按钮,查看实现的效果。

总结:

1、创建一个test.html文件。2、在文件内,使用p标签创建一行文字,使用button标签创建两个按钮,一个为添加class按钮,另一个为删除class按钮。3、两个按钮分别绑定onclick事件,当按钮被点击,分别执行addcss()函数,delcss()函数。4、在js标签内,分别创建addcss()函数和delcss()函数,在addcss()函数内,通过获得p标签对象,使用addClass()方法给p元素添加类名属性,在delcss()函数内,使用removeClass()方法删除类名属性。

注意事项

使用addClass()方法和removeClass()方法之前必须先获得元素对象。

推荐信息