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 29 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery实现朋友圈查看图片
Sep 11 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
codeigniter框架批量插入数据
2014/01/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python定时器实例代码
2017/11/01 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
软件毕业生个人鉴定
2014/03/03 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
六个一活动实施方案
2014/03/21 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
企业法人代表任命书
2014/06/06 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS