单击另一个元素时如何在元素上添加“active”类？

问题描述 投票：0回答：1

所以我有一个包含 4 个不同选项卡的布局，单击每个选项卡时，它会在其下方填充信息。现在，当我单击箭头时，它会根据您所在的选项卡向上或向下移动。但我希望当单击整个选项卡时箭头移动，而不仅仅是箭头。我该如何设置？我会在选项卡按钮上设置一个事件侦听器，以将类 

active
添加到 
dropdown-trigger
吗？

这是我的代码：

//Tab toggle for full page modal
const workMarketToggle = document.querySelector("#tab-toggle--workmarket");
const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(
  ".tab-button, .toggle-text, .toggle-img"
);
const contents = document.querySelectorAll(".content");
tabs &&
  tabs.addEventListener("click", (e) => {
    const button = e.target.closest("button");
    if (!button) return;

    contents.forEach((content) => content.classList.remove("active"));
    tabButton.forEach((btn) => btn.classList.remove("active"));

    button.classList.add("active");
    const element = document.getElementById(button.dataset.id);
    element.classList.add("active");
  });

// Caret Dropdown for tab toggle in Full Page Modal
const caretDropdown = document.querySelectorAll(
  "#dropdown-trigger .caret-dropdown"
);
const buttonNavigation = document.querySelector(".buttonWrapper");
buttonNavigation.addEventListener("click", handleClick);
function handleClick(e) {
  if (e.target.matches("#dropdown-trigger .caret-dropdown")) {
    caretDropdown.forEach((dropdown) => dropdown.classList.remove("active"));
    e.target.classList.add("active");
  }
}
#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
  margin: 30px auto;
}

#tab-toggle--workmarket #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#tab-toggle--profservices #tab6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 50px;
  padding-top: 50px;
}

#tab-toggle--workmarket .wrapper,
#tab-toggle--profservices .wrapper {
  max-width: 1330px;
  margin: auto;
  border-radius: 10px;
}

#tab-toggle--profservices .buttonWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #20347d;
  border-radius: 10px;
  height: 81px;
  max-width: 848px;
  margin: 0 auto;
  position: relative;
  z-index: 12;
}

#tab-toggle--profservices .no-bg {
  background-color: #eff5ff;
  height: auto;
}

#tab-toggle--profservices .contentWrapper {
  max-width: 1220px;
  margin: 0 auto;
}

#tab-toggle--workmarket button.tab-button,
#tab-toggle--profservices button.tab-button {
  font-family: var(--font-family-base);
  color: #fff;
}

.tab-button.tab-button-img {
  background-color: #eff5ff !important;
  height: 100% !important;
}

#tab-toggle--profservices button.tab-button {
  border: none;
  padding: 10px;
  background-color: #20347d;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 10px;
  width: 202px;
  height: 61px;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--profservices button:hover {
  background-color: #d5e3ff;
}

#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
  background-color: white;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  color: #000;
}

#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  width: 202px;
  color: #33478c;
}

#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
  background-color: #f3f4f6;
}

#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
  display: none;
  padding: 10px 20px;
}

#tab-toggle--profservices .content-regular.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

#tab-toggle--profservices .content.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: -30px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}
#dropdown-trigger {
  display: block;
}
.caret-dropdown {
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  height: 10px;
  left: 15px;
  margin-top: 2px;
  position: relative;
  text-align: left;
  transition: 0.4s ease;
  transform: rotate(0);
  width: 13px;
}
.caret-dropdown:after,
.caret-dropdown:before {
  background-color: transparent;
  border-bottom: 11px solid #444;
  box-sizing: content-box;
  content: "";
  display: inline-block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.4s ease;
  width: 3px;
}
.caret-dropdown:before {
  transform: rotate(-135deg);
}
.caret-dropdown:after {
  transform: rotate(135deg);
}
.caret-dropdown.active {
  transform: rotate(0);
  transform: translate(0, -6px);
}
.caret-dropdown.active:before {
  transform: rotate(-45deg);
}
.caret-dropdown.active:after {
  transform: rotate(45deg);
}
<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
  <div id="tab-toggle--profservices">
    <div class="wrapper">
      <div class="buttonWrapper no-bg gap-100">
        <button class="tab-button tab-button-img active" data-id="implementation">

          <img src="#" width="150" class="toggle-img" />
          <h3 class="blue toggle-text">Implementation</h3>
             <a href="#" id="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
        </button>
        <button class="tab-button tab-button-img" data-id="advisory">
   
          <img
            src="#" width="150" class="toggle-img" >
          <h3 class="blue toggle-text">Advisory</h3>
              <a href="#" id="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
        </button>
        <button class="tab-button tab-button-img" data-id="integration">
          
                <img
                  src="#"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Integration</h3>
                    <a href="#" id="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
              </button>
        <button class="tab-button tab-button-img" data-id="transformation">
      
                <img
                  src="#"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Transformation</h3>
                    <a href="#" id="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
              </button>
      </div>
      <div class="contentWrapper">
        <div class="content content-regular active" id="implementation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="advisory">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="integration">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                info 1
              </li>
              <li>
                info 2
              </li>
              <li>
                info 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="transformation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

javascript arrays foreach event-listener
1个回答
0
投票

在事件侦听器中，找到包含被单击元素的 

.tab-button
。然后你可以找到其中的
caret-dropdown
来切换它。

//Tab toggle for full page modal
const workMarketToggle = document.querySelector("#tab-toggle--workmarket");
const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(
  ".tab-button, .toggle-text, .toggle-img"
);
const contents = document.querySelectorAll(".content");
tabs &&
  tabs.addEventListener("click", (e) => {
    const button = e.target.closest("button");
    if (!button) return;

    contents.forEach((content) => content.classList.remove("active"));
    tabButton.forEach((btn) => btn.classList.remove("active"));

    button.classList.add("active");
    const element = document.getElementById(button.dataset.id);
    element.classList.add("active");
  });

// Caret Dropdown for tab toggle in Full Page Modal
const caretDropdown = document.querySelectorAll(
  ".dropdown-trigger .caret-dropdown"
);
const buttonNavigation = document.querySelector(".buttonWrapper");
buttonNavigation.addEventListener("click", handleClick);

function handleClick(e) {
  let tab_button = e.target.closest("button.tab-button");
  if (tab_button) {
    caretDropdown.forEach((dropdown) => dropdown.classList.remove("active"));
    tab_button.querySelector(".caret-dropdown").classList.add("active");
  }
}
#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
  margin: 30px auto;
}

#tab-toggle--workmarket #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#tab-toggle--profservices #tab6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 50px;
  padding-top: 50px;
}

#tab-toggle--workmarket .wrapper,
#tab-toggle--profservices .wrapper {
  max-width: 1330px;
  margin: auto;
  border-radius: 10px;
}

#tab-toggle--profservices .buttonWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #20347d;
  border-radius: 10px;
  height: 81px;
  max-width: 848px;
  margin: 0 auto;
  position: relative;
  z-index: 12;
}

#tab-toggle--profservices .no-bg {
  background-color: #eff5ff;
  height: auto;
}

#tab-toggle--profservices .contentWrapper {
  max-width: 1220px;
  margin: 0 auto;
}

#tab-toggle--workmarket button.tab-button,
#tab-toggle--profservices button.tab-button {
  font-family: var(--font-family-base);
  color: #fff;
}

.tab-button.tab-button-img {
  background-color: #eff5ff !important;
  height: 100% !important;
}

#tab-toggle--profservices button.tab-button {
  border: none;
  padding: 10px;
  background-color: #20347d;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 10px;
  width: 202px;
  height: 61px;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--profservices button:hover {
  background-color: #d5e3ff;
}

#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
  background-color: white;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  color: #000;
}

#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  width: 202px;
  color: #33478c;
}

#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
  background-color: #f3f4f6;
}

#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
  display: none;
  padding: 10px 20px;
}

#tab-toggle--profservices .content-regular.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

#tab-toggle--profservices .content.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: -30px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

.dropdown-trigger {
  display: block;
}

.caret-dropdown {
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  height: 10px;
  left: 15px;
  margin-top: 2px;
  position: relative;
  text-align: left;
  transition: 0.4s ease;
  transform: rotate(0);
  width: 13px;
}

.caret-dropdown:after,
.caret-dropdown:before {
  background-color: transparent;
  border-bottom: 11px solid #444;
  box-sizing: content-box;
  content: "";
  display: inline-block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.4s ease;
  width: 3px;
}

.caret-dropdown:before {
  transform: rotate(-135deg);
}

.caret-dropdown:after {
  transform: rotate(135deg);
}

.caret-dropdown.active {
  transform: rotate(0);
  transform: translate(0, -6px);
}

.caret-dropdown.active:before {
  transform: rotate(-45deg);
}

.caret-dropdown.active:after {
  transform: rotate(45deg);
}
<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
  <div id="tab-toggle--profservices">
    <div class="wrapper">
      <div class="buttonWrapper no-bg gap-100">
        <button class="tab-button tab-button-img active" data-id="implementation">

          <img src="#" width="150" class="toggle-img" />
          <h3 class="blue toggle-text">Implementation</h3>
             <a href="#" class="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
        </button>
        <button class="tab-button tab-button-img" data-id="advisory">
   
          <img
            src="#" width="150" class="toggle-img" >
          <h3 class="blue toggle-text">Advisory</h3>
              <a href="#" class="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
        </button>
        <button class="tab-button tab-button-img" data-id="integration">
          
                <img
                  src="#"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Integration</h3>
                    <a href="#" class="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
              </button>
        <button class="tab-button tab-button-img" data-id="transformation">
      
                <img
                  src="#"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Transformation</h3>
                    <a href="#" class="dropdown-trigger"
                  ><span class="caret-dropdown"></span
                ></a>
              </button>
      </div>
      <div class="contentWrapper">
        <div class="content content-regular active" id="implementation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="advisory">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="integration">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                info 1
              </li>
              <li>
                info 2
              </li>
              <li>
                info 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="transformation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="#" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.