jQuery实现的点击按钮改变样式功能示例


Posted in jQuery onJuly 21, 2018

本文实例讲述了jQuery实现的点击按钮改变样式功能。分享给大家供大家参考,具体如下:

1. css代码:index4.css

@CHARSET "UTF-8";
.sd{
  font-weight: bold;
  color: black;
  background: red;
}

2. jsp代码:index4.jsp

<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath = request.getContextPath();
StringbasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>My JSP 'index4.jsp' startingpage</title>
  <meta http-equiv="pragma"content="no-cache">
  <meta http-equiv="cache-control"content="no-cache">
  <meta http-equiv="expires"content="0">
  <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
  <meta http-equiv="description"content="This is my page">
  <link rel="stylesheet"type="text/css" href="css/index4.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
 <table width="428"height="148" border="1"align="center" id="table">
 <tr>
 <td><div align="center">
 <label><input type="button"name="Submit" value="添加样式" onclick="clicks()"/></label>
 <label><input type="button"name="Submit2" value="移除样式" onclick="removeClicks()"/></label></div>
 </td>
 </tr>
 </table>
 <script type="text/javascript">
  function clicks(){
//  $("#table").toggleClass("sd");
  $("#table").addClass("sd");
  }
  function removeClicks() {
  $("#table").removeClass("sd");
  }
 </script>
 </body>
</html>

运行效果:

jQuery实现的点击按钮改变样式功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
You might like
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python tkinter canvas使用实例
2019/11/04 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Ruby如何进行文件操作
2014/07/17 面试题
Delphi工程师笔试题
2013/09/21 面试题
煤矿班组长的职责
2013/12/25 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
这样写python注释让代码更加的优雅
2021/06/02 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python