jquery点击改变class并toggle的实现代码
2016-06-30来源:易贤网

下面小编就为大家带来一篇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的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息