huncholane'added tab functionality'
huncholane1 file changed, +14 -6
+14-6index.html
| @@ -81,20 +81,18 @@ | ||
| 81 | 81 | border-top-right-radius: 10px; |
| 82 | 82 | } |
| 83 | 83 | /* Containers */ |
| 84 | - .tabs-container div:nth-child(2) { | |
| 84 | + .tabs-container > div:nth-child(2) { | |
| 85 | 85 | padding: 10px 40px; |
| 86 | 86 | border-radius: 0 0 10px 10px; |
| 87 | 87 | background-color: #4d4b4b; |
| 88 | 88 | } |
| 89 | - .tabs-container div:nth-child(2) div { | |
| 89 | + .tabs-container div:nth-child(2) > * { | |
| 90 | 90 | display: none; |
| 91 | + width: 100%; | |
| 91 | 92 | } |
| 92 | - .tabs-container div:nth-child(2) div.active { | |
| 93 | + .tabs-container div:nth-child(2) > *.active { | |
| 93 | 94 | display: block; |
| 94 | 95 | } |
| 95 | - .tabs-container div:nth-child(2) > * { | |
| 96 | - width: 100%; | |
| 97 | - } | |
| 98 | 96 | </style> |
| 99 | 97 | </head> |
| 100 | 98 | <body> |
| @@ -184,8 +182,18 @@ | ||
| 184 | 182 | input.click(); |
| 185 | 183 | } |
| 186 | 184 | |
| 185 | + function selectTab(e) { | |
| 186 | + $(".tabs-container div:first-child h4").removeClass("active"); | |
| 187 | + $(e.target).addClass("active"); | |
| 188 | + $(".tabs-container div:nth-child(2) > *").removeClass("active"); | |
| 189 | + $(".tabs-container div:nth-child(2) > *") | |
| 190 | + .eq($(e.target).index()) | |
| 191 | + .addClass("active"); | |
| 192 | + } | |
| 193 | + | |
| 187 | 194 | document.addEventListener("DOMContentLoaded", (event) => { |
| 188 | 195 | $("#manual-upload-btn").on("click", manualUpload); |
| 196 | + $(".tabs-container div:first-child h4").on("click", selectTab); | |
| 189 | 197 | }); |
| 190 | 198 | </script> |
| 191 | 199 | </body> |