Line 33: | Line 33: | ||
<body> | <body> | ||
− | <div style = "width:100%; height:400px; background-color: | + | <div style = "width:100%; height:400px; background-color:yellow;" id = "one" class = "show"></div> |
<div style = "width:100%; height:400px; background-color:purple; display:none;" id = "two"></div> | <div style = "width:100%; height:400px; background-color:purple; display:none;" id = "two"></div> | ||
<div style = "width:100%; height:400px; background-color:black; display:none;" id = "three"></div> | <div style = "width:100%; height:400px; background-color:black; display:none;" id = "three"></div> | ||
<div style = "width:100%; height:400px; background-color:green; display:none;" id = "four"></div> | <div style = "width:100%; height:400px; background-color:green; display:none;" id = "four"></div> | ||
</div> | </div> | ||
− | <div style = "width:200px; height:100px; background-color:red;" id = "forward"></div> | + | <div style = "width:200px; height:100px; background-color:red; text-align:center; font-size:300%;" id = "forward">></div> |
− | <div style = "width:200px; height:100px; background-color:blue;" id = "reverse"></div> | + | <div style = "width:200px; height:100px; background-color:blue; text-align:center; font-size:300%;" id = "reverse"><</div> |
<div style = "background-color:black;"><div class = 'one'><p style = "opacity:1.5; text-align:center; color:white; font-size:200%;">Project</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Other</p></div> | <div style = "background-color:black;"><div class = 'one'><p style = "opacity:1.5; text-align:center; color:white; font-size:200%;">Project</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Other</p></div> | ||
<div style = "background-color:white;"> | <div style = "background-color:white;"> | ||
Line 53: | Line 53: | ||
$("#forward").click(function () { | $("#forward").click(function () { | ||
n = n+1; | n = n+1; | ||
+ | if (n > 5) { | ||
+ | $("#one").css('display', 'block'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#three").css('display', 'none'); | ||
+ | $("#four").css('display', 'none'); | ||
+ | n = 2;} | ||
+ | else if (n == 2) { | ||
+ | $("#one").css('display', 'block'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#three").css('display', 'none'); | ||
+ | $("#four").css('display', 'none'); } | ||
+ | else if (n==3) { | ||
+ | $("#two").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#three").css('display', 'none'); | ||
+ | $("#four").css('display', 'none');} | ||
+ | else if (n==4) { | ||
+ | $("#three").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#four").css('display', 'none');} | ||
+ | else if (n==5) { | ||
+ | $("#four").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#three").css('display', 'none');} | ||
+ | }); | ||
+ | |||
+ | $("#reverse").click(function () { | ||
+ | n = n-1; | ||
+ | if (n < 2) { | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#three").css('display', 'none'); | ||
+ | $("#four").css('display', 'block'); | ||
+ | n = 5;} | ||
if (n == 2) { | if (n == 2) { | ||
− | $("#one").css('display', 'block'); } | + | $("#one").css('display', 'block'); |
− | else if (n==3) {$("#two").css('display', 'block');} | + | $("#two").css('display', 'none'); |
− | else if (n==4) {$("#three").css('display', 'block');} | + | $("#three").css('display', 'none'); |
− | else {$("#four").css('display', 'block');} | + | $("#four").css('display', 'none'); } |
+ | else if (n==3) { | ||
+ | $("#two").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#three").css('display', 'none'); | ||
+ | $("#four").css('display', 'none');} | ||
+ | else if (n==4) { | ||
+ | $("#three").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#four").css('display', 'none');} | ||
+ | else { | ||
+ | $("#four").css('display', 'block'); | ||
+ | $("#one").css('display', 'none'); | ||
+ | $("#two").css('display', 'none'); | ||
+ | $("#three").css('display', 'none');} | ||
}); | }); | ||
+ | |||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 16:26, 14 August 2016
>
<
Project
Human Practices
Team
Other