jquery点击改变class并toggle的实现代码


Posted in Javascript onMay 15, 2016

jquery点击改变class并toggle的实现代码

<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
  background-image:url(images/21.jpg);
  background-repeat:no-repeat;
  color:#0CF;
}
.bg2 {
  background-image:url(images/22.jpg);
  background-repeat:no-repeat;
  color:#F00;
}
</style>
<script type="text/javascript">
//参数para1:希望隐藏元素的id值
function toggle1(para1){
  if ($("#p2").attr("class")=="bg1")
  {
    $("#p2").attr("class","bg2");
  }
  else 
  {
    $("#p2").attr("class","bg1");
  }
  $("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此处将显示或隐藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等)</p>
</body>
</html>

以上这篇jquery点击改变class并toggle的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 #Javascript
浅析js绑定事件的常用方法
May 15 #Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
用 JSON 处理缓存
2007/04/27 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
一行python实现树形结构的方法
2019/08/09 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Python日志器使用方法及原理解析
2020/09/27 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
新学期开学标语
2014/06/30 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
决心书格式范文
2015/09/23 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
分享python函数常见关键字
2022/04/26 Python