tab

Miracle30/static/css/main.css

@@ -1,3 +1,60 @@
+/* tab */
+.tab_container {
+  display: flex;
+}
+
+.tab_item {
+  cursor: pointer;
+}
+
+.tab_item:hover {
+  background-color: var(--main-orange-color);
+  transition: background-color 0.4s ease-in-out;
+}
+
+.tab_item:hover .tab_item_title {
+  color: #fff;
+  transition: color 0.4s ease-in-out;
+}
+
+.tab_item.active {
+  border-bottom: 2px solid var(--main-orange-color);
+}
+
+.tab_item.active .tab_item_title {
+  color: var(--main-orange-color);
+}
+
+.tab_item.active:hover {
+  background-color: var(--main-orange-color);
+  transition: background-color 0.4s ease-in-out;
+}
+
+.tab_item.active:hover .tab_item_title {
+  color: #fff;
+  transition: color 0.4s ease-in-out;
+}
+
+.tab_item_title {
+  display: inline-block;
+  color: #999;
+  font-weight: 700;
+  text-decoration: none;
+  margin: 15px;
+}
+
+.content-container {
+  padding: 10px;
+}
+
+.content-container__content {
+  display: none;
+}
+
+.content-container__content.target {
+  display: block;
+}
+
 /* btns */
 .goal_verify {
   display: flex;
@@ -8,6 +65,7 @@
   margin: var(--padding-micro);
 }
 
+/* tab1----------- */
 /* star board */
 .level1 {
   background-color: white;

Miracle30/static/css/mypage.css

@@ -1,3 +1,4 @@
+/* tab */
 .my_tab {
   display: flex;
 }

Miracle30/static/css/navbar.css

@@ -9,7 +9,7 @@ ul {
   padding-left: 0;
 }
 
-li {
+.nav_category li {
   padding-top: var(--padding-small);
 }
 
@@ -63,23 +63,23 @@ li {
 }
 
 /* 카테고리 추가 */
-.nav_plus {
+/* .nav_plus {
   padding-bottom: var(--padding-medium);
-}
+} */
 
-.nav_plus .nav_toggleBtn {
+/* .nav_plus .nav_toggleBtn {
   width: 100%;
   text-align: center;
   font-size: 30px;
-}
+} */
 
-.nav_plusList {
+/* .nav_plusList {
   display: none;
 }
 
 .nav_plusList.clicked {
   display: block;
-}
+} */
 
 .nav_bar {
   display: none;

Miracle30/static/css/show_certify.css

@@ -0,0 +1,23 @@
+.certify_container {
+  width: 40%;
+}
+.certify_list {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+.certify_list li {
+  margin-bottom: 10px;
+  background: #f9f9ff;
+  display: block;
+  line-height: 40px;
+  padding: 0px 18px;
+  font-size: 14px;
+  font-family: "Roboto", sans-serif;
+  color: #777777;
+}
+
+span {
+  float: right;
+}

Miracle30/static/js/group_main.js

@@ -24,8 +24,9 @@ const pTag = document.getElementsByTagName("p"),
 
 modalBtn.forEach((elem, index) => {
   elem.addEventListener("click", (e) => {
+    console.log(elem, index);
     modal.style.display = "block";
-    let data = pTag[index - 2].textContent;
+    let data = pTag[index].textContent;
     data = data.replace(/'/gi, "");
     data = data.substr(1, data.length - 2);
     modalBody.textContent = data;

Miracle30/static/js/main.js

@@ -0,0 +1,19 @@
+const tabItem = document.querySelectorAll(".tab_item");
+const tabContent = document.querySelectorAll(".content-container__content");
+
+tabItem.forEach((item) => {
+  item.addEventListener("click", tabHandler);
+});
+
+function tabHandler(item) {
+  const tabTarget = item.currentTarget;
+  const target = tabTarget.dataset.tab;
+  tabItem.forEach((title) => {
+    title.classList.remove("active");
+  });
+  tabContent.forEach((target) => {
+    target.classList.remove("target");
+  });
+  document.querySelector("#" + target).classList.add("target");
+  tabTarget.classList.add("active");
+}

Miracle30/static/js/mypage.js

@@ -16,21 +16,3 @@ infoBtn.addEventListener("click", () => {
   goal.style.display = "none";
   info.style.display = "block";
 });
-
-// function goalClick() {
-//   // my_goalBtn class -> clicked 추가
-//   // my_info class -> clicked 삭제
-//   goal.classList.toggle("clicked");
-//   info.classList.toggle("clicked");
-//   goal.style.display = "block";
-//   info.style.display = "none";
-// }
-
-// function infoClick() {
-//   // my_goalBtn class -> clicked 삭제
-//   // my_info class -> clicked 추가
-//   goal.classList.toggle("clicked");
-//   info.classList.toggle("clicked");
-//   goal.style.display = "none";
-//   info.style.display = "block";
-// }