文章/答案/技术大牛

发布

社区首页 >问答首页 >onclick函数使用classList添加和删除CSS类。

问onclick函数使用classList添加和删除CSS类。
EN

Stack Overflow用户

提问于 2021-03-08 20:38:51

回答 1查看 99关注 0票数 3

我正在努力让我的closeTab函数工作，我的想法是，当一个选项卡被展开时(它变成绿色(active-tile)并添加一个向上箭头(arrow-up)。

这工作得很好，但我正在努力让我的closeTab函数工作，以便当X被单击时，内容被隐藏，active-tile类被删除& arrow-down添加。

我已经将当前的实现留在了所有的磁贴上，只剩下一个磁贴(第二个磁贴使用了我的函数，但不起作用)任何想法都会很好！在这里使用代码笔：https://codepen.io/simoncunningham/pen/dyOjEqK?editors=1010

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  var i, x;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";

  // Get all the tabs into a collection
  // (don't use .getElementsByClassName()!)
  let tabs = document.querySelectorAll(".tile");

  // Set up a click event handler on each of the tabs
  tabs.forEach(function(tab) {
    tab.addEventListener("click", function(event) {
      // Loop over all the tabs and remove the active class
      tabs.forEach(function(tab) {
        tab.classList.remove("active-tile");
        tab.children[2].classList.remove("arrow-up");
      });

      // Set the background of the clicked tab
      this.classList.add("active-tile");
      tab.children[2].classList.add("arrow-up");
    });
  });
}

function closeTab(tabName, event) {
  event.target.classList.remove("active-tile");
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile>* {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;
  /* For visual only  */
  background-color: #222;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;
  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;
  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}


/* Clear floats after the tiles */

.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}


/* 
  "Desktop" and above
 */

@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

<div class="box">
  <div class="tile" onclick="openTab('b1', event);">
    <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
    <p>Banking</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div id="b1" class="content" style="display: none; background: #222">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span
              >
              <div class="description">
                <h3>Banking</h3>
                <p>
         Description
                </p>
              </div>
            </div>
            <div class="tile" onclick="openTab('b2', event);">
              <img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
              <p>RegTech</p>
              <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
            </div>
            <div
              id="b2"
              class="content"
              style="display: none; background: #222"
            >
              <span
                onclick="closeTab('b2', event)";
                class="closebtn"
                >&times;</span
              >
              <div class="description">
                <h3>RegTech</h3>
                <p>
          Description
                </p>
              </div>
            </div>
            <div class="tile" onclick="openTab('b3', event);">
              <img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
              <p>InsurTech</p>
              <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
            </div>
            <div
              id="b3"
              class="content"
              style="display: none; background: #222"
            >
              <span
                onclick="this.parentElement.style.display='none'"
                class="closebtn"
                >&times;</span
              >
              <div class="description">
                <h3>InsurTech</h3>
                <p>
           Description
                </p>
              </div>
            </div>
            <div class="tile" onclick="openTab('b4', event);">
              <img class="icon-spacing" src="./assets/Icons/Lending.svg" />
              <p>Lending</p>
              <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
            </div>
            <div
              id="b4"
              class="content"
              style="display: none; background: #222"
            >
              <span
                onclick="this.parentElement.style.display='none'"
                class="closebtn"
                >&times;</span
              >
              <div class="description">
                <h3>Lending</h3>
                <p>
            Description
                </p>
              </div>
            </div>
          </div>

javascript

html

css

events

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-08 20:51:32

在不同的平铺和部分之间切换的所有代码都已经在openTabs函数中。closeTabs函数应该是代码子集，它只删除每个块上的.active-tile类，并在每个部分上设置display: none。更新的工作示例：

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  var i, x;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";

  // Get all the tabs into a collection
  // (don't use .getElementsByClassName()!)
  let tabs = document.querySelectorAll(".tile");

  // Set up a click event handler on each of the tabs
  tabs.forEach(function (tab) {
    tab.addEventListener("click", function (event) {
      // Loop over all the tabs and remove the active class
      tabs.forEach(function (tab) {
        tab.classList.remove("active-tile");
        tab.children[2].classList.remove("arrow-up");
      });

      // Set the background of the clicked tab
      this.classList.add("active-tile");
      tab.children[2].classList.add("arrow-up");
    });
  });
}

function closeTab(tabName, event) {
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  let tabs = document.querySelectorAll(".tile");
  tabs.forEach(function (tab) {
      tab.classList.remove("active-tile");
  });
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile > * {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  background-color: #222;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

<div class="box">
  <div class="tile" onclick="openTab('b1', event);">
    <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
    <p>Banking</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b1"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b1', event)"
          class="closebtn"
          >&times;</span
      >
    <div class="description">
      <h3>Banking</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b2', event);">
    <img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
    <p>RegTech</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b2"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b2', event)";
          class="closebtn"
          >&times;</span
      >
    <div class="description">
      <h3>RegTech</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b3', event);">
    <img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
    <p>InsurTech</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b3"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b3', event)"
          class="closebtn"
          >&times;</span
      >
    <div class="description">
      <h3>InsurTech</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b4', event);">
    <img class="icon-spacing" src="./assets/Icons/Lending.svg" />
    <p>Lending</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b4"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b4', event)"
          class="closebtn"
          >&times;</span
      >
    <div class="description">
      <h3>Lending</h3>
      <p>
        Description
      </p>
    </div>
  </div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66530038

复制

相似问题

问onclick函数使用classList添加和删除CSS类。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onclick函数使用classList添加和删除CSS类。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onclick函数使用classList添加和删除CSS类。
EN