基于 onclick 添加和删除 CSS 类

Question

我有一组面板在点击时显示内容（并且在激活 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>

Answer 1

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

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

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

Answer 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>