JavaScript更改了不正确的元素，并且没有应用于所需的元素

Question

我是新手，所以请原谅我缺乏理解。我一直在从CodePen编辑一支笔，但卡住了。我复制并修改了基本配置文件卡，使其具有两张卡。有JavaScript可以改变卡片上显示的内容。我无法弄清楚如何在复制的卡上使用JS功能。选择第二张卡片上的按钮时，它会更改第一张卡片的显示方式。我想知道为了实现这一目标，我需要在JS中更改什么。我在网上搜索了一下，但一直找不到解决方案。希望这里有人能够提供帮助。

const buttons = document.querySelectorAll(".card-buttons button");

const sections = document.querySelectorAll(".card-section");

const card = document.querySelector(".card");

const handleButtonClick = (e) => {

  const targetSection = e.target.getAttribute("data-section");

  const section = document.querySelector(targetSection);

  targetSection !== "#about"

    ? card.classList.add("is-active")

    : card.classList.remove("is-active");

  card.setAttribute("data-state", targetSection);

  sections.forEach((s) => s.classList.remove("is-active"));

  buttons.forEach((b) => b.classList.remove("is-active"));

  e.target.classList.add("is-active");

  section.classList.add("is-active");

};

buttons.forEach((btn) => {

  btn.addEventListener("click", handleButtonClick);

});

var elements = document.getElementsByClassName("card");

  for(var i = 0; i < elements.length; i++)

    {

      elements[i].onclick = function(){

        // remove class from sibling

        var el = elements[0];

        while(el)

        {

          if(el.tagName === "DIV"){

            //remove class

            el.classList.remove("is-active");                   

          }

          // pass to the new sibling

          el = el.nextSibling;

        }

        this.classList.add("is-active");  

      };

    }

Answer 1

首先，您为卡片中的每个部分使用ID，并且它们是重复的，请记住，ID必须是唯一的。处理此问题的最简单方法是将ID移动到数据集，如下所示：原文：改为：<div class="card-section" id="about"><div class="card-section" data-id="about">您只获得全局范围内的第一张卡，但您需要获取单击按钮所属的卡：const card = document.querySelector(".card");&nbsp; // Find the card&nbsp; const card = e.target.closest(".card");现在，您可以通过存储在数据集中的ID来获取和搜索要激活的部分：targetSection&nbsp; const targetSection = e.target.getAttribute("data-section");&nbsp; // Then find the section by searching for dataset id atribute&nbsp; const section = card.querySelector(`[data-id='${targetSection}']`);从以下位置删除：#JavascripttargetSection !== "#about"CSS规则，经验和接触相同.card[data-state="#about"]HTML按钮，用于体验和联系<button data-section="#about">ABOUT</button>更新：要关闭“非活动”卡，删除类是不够的，因为您有'[data-state='some-value']的栅栏，因此，删除该值以使其工作。is-activeconst buttons = document.querySelectorAll(".card-buttons button");const sections = document.querySelectorAll(".card-section");// Get all cardsconst cards = document.querySelectorAll(".card");const handleButtonClick = (e) => {&nbsp; // First close all the cards&nbsp; cards.forEach((c) => {&nbsp; &nbsp; &nbsp; c.classList.remove('is-active');&nbsp; &nbsp; &nbsp; c.dataset.state = '';&nbsp; });&nbsp; // I've moved these 2 lines here from below&nbsp; sections.forEach((s) => s.classList.remove("is-active"));&nbsp; buttons.forEach((b) => b.classList.remove("is-active"));// Find the card&nbsp; const card = e.target.closest(".card");&nbsp; const targetSection = e.target.getAttribute("data-section");&nbsp; // Then find the section&nbsp; const section = card.querySelector(`[data-id='${targetSection}']`);&nbsp; targetSection !== "about"&nbsp; &nbsp; ? card.classList.add("is-active")&nbsp; &nbsp; : card.classList.remove("is-active");&nbsp; card.setAttribute("data-state", targetSection);&nbsp; e.target.classList.add("is-active");&nbsp; section.classList.add("is-active");};buttons.forEach((btn) => {&nbsp; btn.addEventListener("click", handleButtonClick);});@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");* {&nbsp; box-sizing: border-box;}body {&nbsp; color: #2b2c48;&nbsp; font-family: "Jost", sans-serif;&nbsp; background-image: url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80);&nbsp; background-repeat: no-repeat;&nbsp; background-size: cover;&nbsp; background-position: center;&nbsp; background-attachment: fixed;&nbsp; min-height: 100vh;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; padding: 20px;}.card {&nbsp; min-width: 340px;&nbsp; max-width: 340px;&nbsp; margin: auto;&nbsp; overflow-y: auto;&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; overflow-x: hidden;&nbsp; background-color: rgba(255, 255, 255, 1);&nbsp; display: flex;&nbsp; transition: 0.3s;&nbsp; flex-direction: column;&nbsp; border-radius: 10px;&nbsp; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);}.card[data-state="about"] {&nbsp; height: 550px;&nbsp; .card-main {&nbsp; &nbsp; padding-top: 0;&nbsp; }}.card[data-state="contact"] {&nbsp; height: 550px;}.card[data-state="experience"] {&nbsp; height: 550px;}.card.is-active {&nbsp; .card-header {&nbsp; &nbsp; height: 80px;&nbsp; }&nbsp; .card-cover {&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; top: -50px;&nbsp; }&nbsp; .card-avatar {&nbsp; &nbsp; transform: none;&nbsp; &nbsp; left: 20px;&nbsp; &nbsp; width: 50px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; bottom: 10px;&nbsp; }&nbsp; .card-fullname,&nbsp; .card-jobtitle,&nbsp; .card-jobtype {&nbsp; &nbsp; left: 86px;&nbsp; &nbsp; transform: none;&nbsp; }&nbsp; .card-fullname {&nbsp; &nbsp; bottom: 18px;&nbsp; &nbsp; font-size: 19px;&nbsp; }&nbsp; .card-jobtitle {&nbsp; &nbsp; bottom: 16px;&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; font-size: 10px;&nbsp; }&nbsp; .card-jobtype {&nbsp; &nbsp; bottom: 0px;&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; font-size: 10px;&nbsp; }}.card-header {&nbsp; position: relative;&nbsp; display: flex;&nbsp; height: 200px;&nbsp; flex-shrink: 0;&nbsp; width: 100%;&nbsp; transition: 0.3s;&nbsp; * {&nbsp; &nbsp; transition: 0.3s;&nbsp; }}.card-cover {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; height: 160px;&nbsp; top: -20%;&nbsp; left: 0;&nbsp; will-change: top;&nbsp; background-size: cover;&nbsp; background-position: center;&nbsp; filter: blur(30px);&nbsp; transform: scale(1.2);&nbsp; transition: 0.5s;}.card-avatar {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);&nbsp; border-radius: 50%;&nbsp; object-position: center;&nbsp; object-fit: cover;&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 50%;&nbsp; transform: translateX(-50%) translateY(-64px);}.card-fullname {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; font-size: 22px;&nbsp; font-weight: 700;&nbsp; text-align: center;&nbsp; white-space: nowrap;&nbsp; transform: translateY(-10px) translateX(-50%);&nbsp; left: 50%;}.card-jobtitle {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; font-size: 11px;&nbsp; white-space: nowrap;&nbsp; font-weight: 500;&nbsp; opacity: 0.7;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 1.5px;&nbsp; margin: 0;&nbsp; left: 50%;&nbsp; transform: translateX(-50%) translateY(-7px);}.card-jobtype {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; font-size: 11px;&nbsp; white-space: nowrap;&nbsp; font-weight: 500;&nbsp; opacity: 0.7;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 1.5px;&nbsp; margin: 0;&nbsp; left: 50%;&nbsp; transform: translateX(-50%) translateY(10px);}.card-main {&nbsp; position: relative;&nbsp; flex: 1;&nbsp; display: flex;&nbsp; padding-top: 10px;&nbsp; flex-direction: column;}.card-subtitle {&nbsp; font-weight: 700;&nbsp; font-size: 13px;&nbsp; margin-bottom: 8px;}.card-content {&nbsp; padding: 20px;&nbsp; text-align: justify;}.card-desc {&nbsp; line-height: 1.6;&nbsp; color: #636b6f;&nbsp; font-size: 14px;&nbsp; margin: 0;&nbsp; font-weight: 400;&nbsp; font-family: "DM Sans", sans-serif;}.card-social {&nbsp; display: flex;&nbsp; position: bottom;&nbsp; align-items: center;&nbsp; padding: 0 0px;&nbsp; margin-bottom: 30px;&nbsp; transform: translateX(25%) translateY(350%);&nbsp; svg {&nbsp; &nbsp; fill: rgb(165, 181, 206);&nbsp; &nbsp; width: 16px;&nbsp; &nbsp; display: block;&nbsp; &nbsp; transition: 0.3s;&nbsp; }&nbsp; a {&nbsp; &nbsp; color: #8797a1;&nbsp; &nbsp; height: 32px;&nbsp; &nbsp; width: 32px;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; display: inline-flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; background-color: rgba(93, 133, 193, 0.05);&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; svg {&nbsp; &nbsp; &nbsp; &nbsp; fill: darken(rgb(165, 181, 206), 20%);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &:last-child {&nbsp; &nbsp; &nbsp; margin-right: 0;&nbsp; &nbsp; }&nbsp; }}.card-buttons {&nbsp; display: flex;&nbsp; background-color: #fff;&nbsp; margin-top: auto;&nbsp; position: sticky;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; button {&nbsp; &nbsp; flex: 1 1 auto;&nbsp; &nbsp; user-select: none;&nbsp; &nbsp; background: 0;&nbsp; &nbsp; font-size: 13px;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; padding: 15px 5px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; color: #5c5c6d;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-family: "Jost", sans-serif;&nbsp; &nbsp; font-weight: 500;&nbsp; &nbsp; outline: 0;&nbsp; &nbsp; border-bottom: 3px solid transparent;&nbsp; &nbsp; &.is-active,&nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; color: #2b2c48;&nbsp; &nbsp; &nbsp; border-bottom: 3px solid #8a84ff;&nbsp; &nbsp; &nbsp; background: linear-gradient(&nbsp; &nbsp; &nbsp; &nbsp; to bottom,&nbsp; &nbsp; &nbsp; &nbsp; rgba(127, 199, 231, 0) 0%,&nbsp; &nbsp; &nbsp; &nbsp; rgba(207, 204, 255, 0.2) 44%,&nbsp; &nbsp; &nbsp; &nbsp; rgba(211, 226, 255, 0.4) 100%&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; }}.card-section {&nbsp; display: none;&nbsp; &.is-active {&nbsp; &nbsp; display: block;&nbsp; &nbsp; animation: fadeIn 0.6s both;&nbsp; }}@keyframes fadeIn {&nbsp; 0% {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: translatey(40px);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 1;&nbsp; }}.card-timeline {&nbsp; margin-top: 30px;&nbsp; position: relative;&nbsp; &:after {&nbsp; &nbsp; background: linear-gradient(&nbsp; &nbsp; &nbsp; to top,&nbsp; &nbsp; &nbsp; rgba(134, 214, 243, 0) 0%,&nbsp; &nbsp; &nbsp; rgba(81, 106, 204, 1) 100%&nbsp; &nbsp; );&nbsp; &nbsp; content: "";&nbsp; &nbsp; left: 42px;&nbsp; &nbsp; width: 2px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; content: "";&nbsp; }}.card-item {&nbsp; position: relative;&nbsp; padding-left: 60px;&nbsp; padding-right: 20px;&nbsp; padding-bottom: 30px;&nbsp; z-index: 1;&nbsp; &:last-child {&nbsp; &nbsp; padding-bottom: 5px;&nbsp; }&nbsp; &:after {&nbsp; &nbsp; content: attr(data-year);&nbsp; &nbsp; width: 10px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 37px;&nbsp; &nbsp; width: 8px;&nbsp; &nbsp; height: 8px;&nbsp; &nbsp; line-height: 0.6;&nbsp; &nbsp; border: 2px solid #fff;&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; text-indent: -35px;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; color: rgba(#868686, 0.7);&nbsp; &nbsp; background: linear-gradient(&nbsp; &nbsp; &nbsp; to bottom,&nbsp; &nbsp; &nbsp; lighten(#516acc, 20%) 0%,&nbsp; &nbsp; &nbsp; #516acc 100%&nbsp; &nbsp; );&nbsp; }}.card-item-title {&nbsp; font-weight: 500;&nbsp; font-size: 14px;&nbsp; margin-bottom: 5px;}.card-item-desc {&nbsp; font-size: 13px;&nbsp; color: #6f6f7b;&nbsp; line-height: 1.5;&nbsp; font-family: "DM Sans", sans-serif;}.card-contact-wrapper {&nbsp; margin-top: 20px;}.card-contact {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; font-size: 13px;&nbsp; color: #6f6f7b;&nbsp; font-family: "DM Sans", sans-serif;&nbsp; line-height: 1.6;&nbsp; cursor: pointer;&nbsp; & + & {&nbsp; &nbsp; margin-top: 16px;&nbsp; }&nbsp; svg {&nbsp; &nbsp; flex-shrink: 0;&nbsp; &nbsp; width: 30px;&nbsp; &nbsp; min-height: 34px;&nbsp; &nbsp; margin-right: 12px;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; padding-right: 12px;&nbsp; &nbsp; border-right: 1px solid #dfe2ec;&nbsp; }}.contact-me {&nbsp; border: 0;&nbsp; outline: none;&nbsp; background: linear-gradient(&nbsp; &nbsp; to right,&nbsp; &nbsp; rgba(83, 200, 239, 0.8) 0%,&nbsp; &nbsp; rgba(81, 106, 204, 0.8) 96%&nbsp; );&nbsp; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);&nbsp; color: #fff;&nbsp; padding: 12px 16px;&nbsp; width: 100%;&nbsp; border-radius: 5px;&nbsp; margin-top: 25px;&nbsp; cursor: pointer;&nbsp; font-size: 14px;&nbsp; font-weight: 500;&nbsp; font-family: "Jost", sans-serif;&nbsp; transition: 0.3s;}[class^="grid-item"] {&nbsp; color: #6f6f7b;&nbsp; text-align: center;&nbsp; background-color: none;}.grid {&nbsp; margin: 0%;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(2, 1fr);&nbsp; grid-template-rows: repeat(3, 50px);&nbsp; grid-gap: 5px;&nbsp; position: relative;&nbsp; background-color: none;&nbsp; z-index: -2;&nbsp; justify-content: center;}.grid-item1 {&nbsp; display: flex;&nbsp; background-color: none;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; text-transform: uppercase;&nbsp; height: 45px;&nbsp; width: 50px;&nbsp; border-right: 1px solid #dfe2ec;&nbsp; .i {&nbsp; &nbsp; color: #dfe2ec;&nbsp; }}.grid-item2 {&nbsp; display: flex;&nbsp; background-color: none;&nbsp; align-items: center;&nbsp; justify-content: left;&nbsp; text-transform: uppercase;&nbsp; height: 45px;&nbsp; width: 240px;}<div class="card" data-state="">&nbsp; <div class="card-header">&nbsp; &nbsp; <div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')"></div>&nbsp; &nbsp; <img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="avatar" />&nbsp; &nbsp; <h1 class="card-fullname">#Project Manager</h1>&nbsp; &nbsp; <h2 class="card-jobtitle">Leading Brand</h2>&nbsp; &nbsp; <h2 class="card-jobtype">{CONTRACT}</h2>&nbsp; </div>&nbsp; <div class="card-main">&nbsp; &nbsp; <div class="card-section" data-id="about">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">ABOUT</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">Do you have coding experience? Are you a technological professional? Do you strive to break through the barrier of technological limits? <br><br> Our client is looking for a dedicated <strong>#TechnicalProjectManager</strong>. Join a brand leading organisation.&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; <button class="contact-me">VIEW FULL ROLE OVERVIEW</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card-section" data-id="experience">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">THE ROLE</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">As a Technical Project Manager, dealing with Management and teams involved on the project is essential. You must also have an ability to understand the Front, Back & Middleware layers of the entire project.</p>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">THE TEAM</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">There is good communication and engagement between management and employees. They offer a positive and encouraging company culture. The team works hard, and the role is fast paced.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div class="clear">&nbsp; &nbsp; <div class="card-section" data-id="contact">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle" style="align:center !important">SUBMIT YOUR CV</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-contact-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fal fa-file-upload fa-2x"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">Upload your CV</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fab fa-whatsapp fa-2x"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">submit your Cv via WHatsapp</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fal fa-envelope fa-2x"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">drop us an email</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card-buttons">&nbsp; &nbsp; &nbsp; <button data-section="about" <!--class="is-active" -->ABOUT</button>&nbsp; &nbsp; &nbsp; <button data-section="experience">ROLE & TEAM</button>&nbsp; &nbsp; &nbsp; <button data-section="contact">APPLY</button>&nbsp; &nbsp; </div>&nbsp; </div></div><div class="card" data-state="">&nbsp; <div class="card-header">&nbsp; &nbsp; <div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')"></div>&nbsp; &nbsp; <img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="avatar" />&nbsp; &nbsp; <h1 class="card-fullname">#Project Manager</h1>&nbsp; &nbsp; <h2 class="card-jobtitle">Leading Brand</h2>&nbsp; &nbsp; <h2 class="card-jobtype">{CONTRACT}</h2>&nbsp; </div>&nbsp; <div class="card-main">&nbsp; &nbsp; <div class="card-section" data-id="about">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">ABOUT</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">Do you have coding experience? Are you a technological professional? Do you strive to break through the barrier of technological limits? <br><br> Our client is looking for a dedicated <strong>#TechnicalProjectManager</strong>. Join a brand leading organisation.&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; <button class="contact-me">VIEW FULL ROLE OVERVIEW</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card-section" data-id="experience">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">THE ROLE</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">As a Technical Project Manager, dealing with Management and teams involved on the project is essential. You must also have an ability to understand the Front, Back & Middleware layers of the entire project.</p>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle">THE TEAM</div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-desc">There is good communication and engagement between management and employees. They offer a positive and encouraging company culture. The team works hard, and the role is fast paced.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div class="clear">&nbsp; &nbsp; <div class="card-section" data-id="contact">&nbsp; &nbsp; &nbsp; <div class="card-content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-subtitle" style="align:center !important">SUBMIT YOUR CV</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-contact-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fal fa-file-upload fa-2x"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">Upload your CV</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fab fa-whatsapp fa-2x"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">submit your Cv via WHatsapp</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item1"><i class="fal fa-envelope fa-2x"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-contact">drop us an email</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card-buttons" id="btns2">&nbsp; &nbsp; &nbsp; <button data-section="about">ABOUT</button>&nbsp; &nbsp; &nbsp; <button data-section="experience">ROLE & TEAM</button>&nbsp; &nbsp; &nbsp; <button data-section="contact">APPLY</button>&nbsp; &nbsp; </div>&nbsp; </div></div>