单击菜单项时更改活动类答案

【问题标题】：Change active class when a menu item is clicked单击菜单项时更改活动类
【发布时间】：2022-08-07 23:09:56
【问题描述】：

当我单击其中一个items in the menu 时，我试图更改活动类，但是如何将选定选项卡上的颜色更改为另一个active 选项卡，然后删除旧选项卡？

.wdc-table-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #484A51;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li {
    float: left;
}

.wdc-table-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li a:hover {
    background-color: #3A3B41;
}

.wdc-table-menu .active {
    background-color: #3A3B41;
}

.wdc-table-title {
    text-align: center;
}

.wdc-table-title p {
    color: #D3D3D9;
    font-size: 2rem !important;
    font-weight: bold;
}

    <div class=\"wdc-table-menu\">
        <ul id=\"menu_wdc\">
            <li><a class=\"wdc_btn active\" href=\"#\">WDC</a></li>
            <li><a class=\"wdc-btn\" href=\"#\">History</a></li>
            <li><a class=\"wdc-btn\" href=\"#\">Components</a></li>
        </ul>
    </div>

这回答了你的问题了吗？ How can I change an element\'s class with JavaScript?

标签： javascript html

【解决方案1】：

你会想使用 JavaScript 来实现这一点。像这样：

const links =document.querySelectorAll(".wdc-btn ");
links.forEach(btn => btn.addEventListener("click",(e)=>{
     e.preventDefault();
     document.querySelector(".wdc-btn.active").classList.remove("active");
     btn.classList.add("active")
  }));

.wdc-table-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #484A51;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li {
    float: left;
}

.wdc-table-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li a:hover {
    background-color: #3A3B41;
}

.wdc-table-menu .active {
    background-color: #3A3B41;
}

.wdc-table-title {
    text-align: center;
}

.wdc-table-title p {
    color: #D3D3D9;
    font-size: 2rem !important;
    font-weight: bold;
}

<div class="wdc-table-menu">
        <ul id="menu_wdc">
            <li><a class="wdc-btn active" href="#">WDC</a></li>
            <li><a class="wdc-btn" href="#">History</a></li>
            <li><a class="wdc-btn" href="#">Components</a></li>
        </ul>
    </div>

【讨论】：

【解决方案2】：

您可以使用伪类:focus。还有一个事件onclick 用于删除.active：

function myfunction(){
  document.getElementById("active").classList.remove("active");
}

.wdc-table-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #484A51;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li {
    float: left;
}

.wdc-table-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-top-right-radius: 0.938rem;
    border-top-left-radius: 0.938rem;
}

.wdc-table-menu li a:hover {
    background-color: #3A3B41;
}
.wdc-table-menu li .active{
    background-color: #ff0000;
}
.wdc-table-menu li a:focus{ /*here*/
    background-color: #ff0000;
}
.wdc-table-title {
    text-align: center;
}
.wdc-table-title p {
    color: #D3D3D9;
    font-size: 2rem !important;
    font-weight: bold;
}

<div class="wdc-table-menu">
        <ul id="menu_wdc" onclick="myfunction()">
            <li><a id="active" class="wdc_btn active" href="#">WDC</a></li>
            <li><a class="wdc-btn" href="#">History</a></li>
            <li><a class="wdc-btn" href="#">Components</a></li>
        </ul>
    </div>

【讨论】：