jquery点击改变class并toggle 

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title></title>
 5 <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
 6 <style>
 7 .bg1 {
 8     background-image:url(images/21.jpg);
 9     background-repeat:no-repeat;
10     color:#0CF;
11 }
12 .bg2 {
13     background-image:url(images/22.jpg);
14     background-repeat:no-repeat;
15     color:#F00;
16 }
17 </style>
18 <script type="text/javascript">
19 //参数para1：希望隐藏元素的id值
20 function toggle1(para1){
21     if ($("#p2").attr("class")=="bg1")
22     {
23         $("#p2").attr("class","bg2");
24     }
25     else 
26     {
27         $("#p2").attr("class","bg1");
28     }
29     $("#"+para1).toggle();
30 }
31 </script>
32 </head>
33 <body>
34 <p id="p1">此处将显示或隐藏</p>
35 <p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等）</p>
36 </body>
37 </html>

 

posted on 2015-12-10 22:59  cag2050  阅读(69)  评论(0)    收藏  举报

导航