1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
---|
2 | <html xmlns="http://www.w3.org/1999/xhtml">
|
---|
3 | <head>
|
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
---|
5 | <title>Jquery Toggle Class Bug</title>
|
---|
6 |
|
---|
7 | <script type="text/javascript" src="jquery-1.3.1.js"></script>
|
---|
8 |
|
---|
9 | <script type="text/javascript">
|
---|
10 | <!--
|
---|
11 |
|
---|
12 |
|
---|
13 | $(document).ready(function(){
|
---|
14 |
|
---|
15 |
|
---|
16 | $("div#oy div").hover(function () {
|
---|
17 |
|
---|
18 | var ad= $(this).attr("id").replace("sa","");
|
---|
19 |
|
---|
20 | $(this).toggleClass('s2');
|
---|
21 | $(this).animate({opacity: "0.5"});
|
---|
22 |
|
---|
23 |
|
---|
24 | },function(){
|
---|
25 |
|
---|
26 | var ad= $(this).attr("id").replace("sa","");
|
---|
27 | $(this).toggleClass('s2');
|
---|
28 | $(this).animate({opacity: "1"});
|
---|
29 |
|
---|
30 |
|
---|
31 | }).click(function(){
|
---|
32 |
|
---|
33 |
|
---|
34 | var ad= $(this).attr("id").replace("sa","");
|
---|
35 |
|
---|
36 | $(this).attr("class", "s1");
|
---|
37 | $(this).toggleClass('s3');
|
---|
38 |
|
---|
39 | });
|
---|
40 |
|
---|
41 |
|
---|
42 |
|
---|
43 |
|
---|
44 |
|
---|
45 |
|
---|
46 | });
|
---|
47 |
|
---|
48 |
|
---|
49 |
|
---|
50 |
|
---|
51 |
|
---|
52 |
|
---|
53 | //-->
|
---|
54 | </script>
|
---|
55 |
|
---|
56 | <style type="text/css">
|
---|
57 | <!--
|
---|
58 | body,td,th {
|
---|
59 | font-family: Arial, Helvetica, sans-serif;
|
---|
60 | font-size: 9px;
|
---|
61 | color: #333333;
|
---|
62 | }
|
---|
63 |
|
---|
64 | .s1
|
---|
65 | {
|
---|
66 | width:50px;
|
---|
67 | margin:2px;
|
---|
68 | height:50px;
|
---|
69 | float:left;
|
---|
70 | cursor:pointer;
|
---|
71 | background-repeat:no-repeat;
|
---|
72 | background-color:#999999;
|
---|
73 | }
|
---|
74 |
|
---|
75 | .s2
|
---|
76 | {
|
---|
77 | width:50px;
|
---|
78 | margin:2px;
|
---|
79 | height:50px;
|
---|
80 | float:left;
|
---|
81 | cursor:pointer;
|
---|
82 | background-repeat:no-repeat;
|
---|
83 | background-color:#3399CC;
|
---|
84 | }
|
---|
85 |
|
---|
86 |
|
---|
87 | .s3
|
---|
88 | {
|
---|
89 | width:50px;
|
---|
90 | margin:2px;
|
---|
91 | height:50px;
|
---|
92 | float:left;
|
---|
93 | cursor:pointer;
|
---|
94 | background-repeat:no-repeat;
|
---|
95 | background-color:#FFCC00;
|
---|
96 | }
|
---|
97 |
|
---|
98 |
|
---|
99 |
|
---|
100 | #oy
|
---|
101 | {
|
---|
102 | width:155px;
|
---|
103 | margin:2px;
|
---|
104 | height:55px;
|
---|
105 | float:left;
|
---|
106 | }
|
---|
107 |
|
---|
108 | #sonuc
|
---|
109 | {
|
---|
110 | width:155px;
|
---|
111 | margin:2px;
|
---|
112 | height:55px;
|
---|
113 | float:left;
|
---|
114 | }
|
---|
115 | .style2 {font-size: 24px}
|
---|
116 |
|
---|
117 |
|
---|
118 | -->
|
---|
119 | </style>
|
---|
120 |
|
---|
121 |
|
---|
122 | </head>
|
---|
123 |
|
---|
124 | <body>
|
---|
125 |
|
---|
126 |
|
---|
127 | <div id="oy">
|
---|
128 | <div class="s1" id="sa1"></div>
|
---|
129 | <div class="s3" id="sa2"></div>
|
---|
130 | <div class="s1" id="sa3"></div>
|
---|
131 |
|
---|
132 | </div>
|
---|
133 | </body>
|
---|
134 | </html>
|
---|