基于 onclick 添加和删除 CSS 类答案

【问题标题】：Adding & removing CSS classes based on onclick基于 onclick 添加和删除 CSS 类
【发布时间】：2021-06-06 05:05:18
【问题描述】：

我有一组在单击时显示内容的面板（当arrow-up 类处于活动状态时变为绿色，以指示内容已被扩展。但是我正在努力实现两者的删除arrow-up & active-tile 类，当单击关闭按钮且没有活动磁贴时（因此应该全部为黑色，向下箭头）。

这就是目前正在发生的事情onclick:onclick="this.parentElement.style.display='none'" - 任何人都可以建议实现上述情况的最佳方法是什么？在这里工作小提琴：https://jsfiddle.net/simoncunningham/j7qofxvc/

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");
        });
    });
}

<style media="screen">
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;
    }
}
</style>

<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>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </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="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>RegTech</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </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>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </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>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
</div>

<div class="box">
    <div class="tile" onclick="openTab('b5', event);">
        <img class="icon-spacing" src="./assets/Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b5" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Accounting</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b6', event);">
        <img class="icon-spacing" src="./assets/Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b6" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Payments</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b7', event);">
        <img class="icon-spacing" src="./assets/Icons/Quote.svg" />
        <p>Quote</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b7" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Quote</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b8', event);">
        <img class="icon-spacing" src="./assets/Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b8" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>WealthTech</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

你尝试过使用 classList.remove("active-tile") 吗？
使用 onclick 属性。不是一个好主意，我的建议是使用 addEventListener。
我想说最好的方法应该是，请删除内联样式，并使用类进行切换。因此，即使在不久的将来，如果您想更改任何颜色，那么如果您计划使用 SCSS/SASS/LESS 编写 CSS，那么更改和缩放会更容易。

标签： javascript html css flexbox

【解决方案1】：

添加内联不是首选方式，您可以使用切换或删除等功能来满足您的需求，如下所示

element.classList.add("active-tile");
element.classList.remove("active-tile");
element.classList.toggle("active-tile");

要切换、添加和删除类，您可以参考this

【讨论】：

谢谢 - 我尝试在 onclick 中添加一个closeTab()，其功能如下：` function closeTab() { this.parentElement.style.display='none'; element.classList.remove("active-tile"); } ` 你能看出我哪里出错了吗？
这里你必须给出你想要移除类的元素（类似于 openTab 函数 element.target.calssList.add("active-tile");)

【解决方案2】：

我已经在下面的链接中回答了与此类似的问题。

How to remove style attribute added with jquery

最简单的方法是创建 CSS 规则的样式表。

在该样式表中，您应该定义 2 个类。

假设 1 用于您想要的 CSS 规则，另一个用于默认/无规则。

我只是向你展示了做这件事的最简单的版本，但有另一个方面。

$('#b1').on('click', function() {
  $('.c1').removeClass('c1');
  $(this).addClass('c2');
});

.c1 {
  color: red;
}

.c2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="b1">Change</button>
<p class="c1">This is a Test Line.</p>

【讨论】：