1 |
1 |
2 |
2 |
3 $(document).ready(function() { |
3 $(document).ready(function() { |
4 |
4 |
5 //Get all the LI from the #tabMenu UL |
5 //Get all the LI from the #tabMenu UL |
6 $('#tabMenu > li').click(function(){ |
6 $('#tabMenu > li').click(function(){ |
7 |
7 |
8 //perform the actions when it's not selected |
8 //perform the actions when it's not selected |
9 if (!$(this).hasClass('selected')) { |
9 if (!$(this).hasClass('selected')) { |
10 |
10 |
11 //remove the selected class from all LI |
11 //remove the selected class from all LI |
12 $('#tabMenu > li').removeClass('selected'); |
12 $('#tabMenu > li').removeClass('selected'); |
13 |
13 |
14 //Reassign the LI |
14 //Reassign the LI |
15 $(this).addClass('selected'); |
15 $(this).addClass('selected'); |
16 |
16 |
17 //Hide all the DIV in .boxBody |
17 //Hide all the DIV in .boxBody |
18 $('.boxBody div').slideUp('1500'); |
18 $('.boxBody div').slideUp('1500'); |
19 |
19 |
20 //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important. |
20 //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important. |
21 $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); |
21 $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); |
22 } |
22 } |
23 |
23 |
24 }).mouseover(function() { |
24 }).mouseover(function() { |
25 //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest |
25 //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest |
26 $(this).addClass('mouseover'); |
26 $(this).addClass('mouseover'); |
27 $(this).removeClass('mouseout'); |
27 $(this).removeClass('mouseout'); |
28 |
28 |
29 }).mouseout(function() { |
29 }).mouseout(function() { |
30 |
30 |
31 //Add and remove class |
31 //Add and remove class |
32 $(this).addClass('mouseout'); |
32 $(this).addClass('mouseout'); |
33 $(this).removeClass('mouseover'); |
33 $(this).removeClass('mouseover'); |
34 |
34 |
35 }); |
35 }); |
36 |
36 |
37 //Mouseover effect for menu list. |
37 //Mouseover effect for menu list. |
38 $('.boxBody li').click(function(){ |
38 $('.boxBody li').click(function(){ |
39 window.snippets.ContextMenuId.hide(); |
39 window.snippets.ContextMenuId.hide(); |
40 }).mouseover(function() { |
40 }).mouseover(function() { |
41 $(this).css('backgroundColor','#fff'); |
41 $(this).css('backgroundColor','#fff'); |
42 }).mouseout(function() { |
42 }).mouseout(function() { |
43 $(this).css('backgroundColor',''); |
43 $(this).css('backgroundColor',''); |
44 }); |
44 }); |
45 |
45 |
46 }); |
46 }); |
47 |
47 |