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

更新时间：2016年05月15日 10:06:57 投稿：jingxian

下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery实现贪吃蛇小游戏（附源码下载）
网上关于JS实现贪吃蛇的文章有很多，最近闲来无事，想着利用jQury来实现贪吃蛇小游戏，下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法，文中给出的是吸纳思路和示例代码，需要的朋友可以参考下。
2017-03-03
Jquery实现瀑布流布局（备有详细注释）
这篇文章主要介绍了Jquery实现瀑布流布局的方法,可实现图片的动态加载功能,且代码备有详细注释便于理解,需要的朋友可以参考下
2015-07-07
利用浮层使select不可选的实现方法
下面小编就为大家带来一篇利用浮层使select不可选的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-12-12
jQuery插件slider实现拖动滑块选取价格范围
jquery滑块（slider）允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时，将显示一个表示当前值的提示框，用户可通过设置它的属性来自定义滑块。
2015-04-04
jQuery Validation PlugIn的使用方法详解
这篇文章主要介绍了jQuery Validation PlugIn的使用方法，需要的朋友可以参考下
2015-12-12
分享十五款 jQuery 社交网络分享插件
这篇文章主要介绍了分享十五款 jQuery 社交网络分享插件,需要的朋友可以参考下
2015-05-05
ashx文件获取$.ajax()方法发送的数据
这篇文章主要介绍了ashx文件获取$.ajax()方法发送的数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
jQuery实现购物车全功能
这篇文章主要为大家详细介绍了jQuery实现购物车全功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
jQuery自定义多选下拉框效果
这篇文章主要为大家详细介绍了jQuery自定义多选下拉框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
jQuery中filter()和find()的区别深入了解
一直不是很清楚filter()方法和find()方法的区别，看jQuery Cookbook一书后，终于算是搞清楚了，下面将新的与大家分享下
2013-09-09