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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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学习之PHP表达式
2006/10/09 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
Vue实现手机计算器
2020/08/17 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Atom的python插件和常用插件说明
2018/07/08 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
提高python代码运行效率的一些建议
2020/09/29 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
房产销售经理职责
2013/12/20 职场文书
便利店投资创业计划书
2014/02/08 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
机关作风建设整改方案
2014/10/27 职场文书
公司开会通知
2015/04/20 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript