文章/答案/技术大牛

发布

问添加或删除CSS类onClick
EN

Stack Overflow用户

提问于 2021-03-05 22:06:28

回答 2查看 50关注 0票数 0

所以我现在已经设置好了，这样当一个面板被点击时(活动:绿色)，一旦被点击就会变成黑色-但是当面板被点击时，我想用arrow-up类替换arrow-down类。我尝试过添加tab.classList.add('arrow-up')，就像添加绿色背景一样，但它翻转了整个div。我有一个可以工作的JS小提琴，但是你不能很遗憾地看到图标--任何想法/帮助都会非常感谢！

小提琴：https://jsfiddle.net/simoncunningham/a3e6514r/19/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
  </head>
  <body>
    <div style="text-align: center">
      <h2>Expanding Grid</h2>
      <p>Click on the boxes below:</p>
    </div>

    <!-- Four columns -->
    <div class="row">
      <div class="column" onclick="openTab('b1');">
        <img src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b2');">
        <img src="./Icons/Regtech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b3');">
        <img src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b4');">
        <img src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <!-- Full-width columns: (hidden by default) -->
    <div id="b1" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h3>Banking</h3>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b2" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>RegTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b3" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>InsurTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b4" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Lending</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <!-- Bottom four columns -->
    <div class="row">
      <div class="column" onclick="openTab('b5');">
        <img src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b6');">
        <img src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b7');">
        <img src="./Icons/Quote.svg" />
        <p>Quote Aggregators</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b8');">
        <img src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <div id="b5" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Accounting</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b6" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Payments</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b7" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Quote</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b8" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>WealthTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>
  </body>
</html>

    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName('containerTab');
      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('.column');

    // 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-column');
        });

        // Set the background of the clicked tab
        this.classList.add('active-column');
      });
    });

* {
  box-sizing: border-box;
}

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

/* The grid: Four equal columns that floats next to each other */
.column {
  background-color: black;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}
.active-column {
  background-color: green;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

/* Closable button inside the container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  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);
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
  }
}

html

css

responsive

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-05 22:27:47

目前，您可能正在向tab元素添加arrow-up类。但是您打算将其添加到img元素中，该元素是tab的第三个子元素(假设是第三个子元素，因为它具有默认类arrow-down)。

因此，以下可能是您所需要的：

tab.children[2].classList.add('arrow-up');

票数 0

Stack Overflow用户

发布于 2021-03-05 22:30:20

    tabs.forEach(function (tab) {
  tab.addEventListener('click', function (event) {
    // Loop over all the tabs and remove the active class
    tabs.forEach(function (tab) {
      tab.children[2].classList.remove('arrow-up');
    });

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

票数 0

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

原文链接：

https://stackoverflow.com/questions/66493968

复制

相似问题

问添加或删除CSS类onClick
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加或删除CSS类onClickEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加或删除CSS类onClick
EN