在 div 上添加或删除显示活动类

Question

如果单击 li，我想在 div 上添加显示活动，如果单击另一个 li，则将其删除

我有这个代码

<ul class="nav nav-tabs nav-pills nav-fill" id="postsTab" role="tablist">
                    <li class="nav-item" role="presentation"><button aria-controls="entertainment" aria-selected="true" class="nav-link active" data-bs-target="#entertainment" data-bs-toggle="tab" id="entertainment-tab" role="tab" type="button">Entertaiment</button></li>
                    <li class="nav-item" role="presentation"><button aria-controls="infotainment" aria-selected="false" class="nav-link" data-bs-target="#infotainment" data-bs-toggle="tab" id="infotainment-tab" role="tab" type="button">Infotainment</button></li>
                    <li class="nav-item" role="presentation"><button aria-controls="music" aria-selected="false" class="nav-link" data-bs-target="#music" data-bs-toggle="tab" id="music-tab" role="tab" type="button">Music</button></li>
                    <li class="nav-item" role="presentation"><button aria-controls="lifestyle" aria-selected="false" class="nav-link" data-bs-target="#lifestyle" data-bs-toggle="tab" id="lifestyle-tab" role="tab" type="button">Lifestyle</button></li>
                    <li class="nav-item" role="presentation"><button aria-controls="recipe" aria-selected="false" class="nav-link" data-bs-target="#recipe" data-bs-toggle="tab" id="recipe-tab" role="tab" type="button">Recipe</button></li>
                </ul>

并且对于类选项卡窗格淡入淡出上的添加-删除在下面的差异 div 上显示活动只有“选项卡窗格淡入淡出”

<!-- entertainment posts -->
                        <div aria-labelledby="entertainment-tab" class="tab-pane fade show active" id="entertainment" role="tabpanel">
                            <div class="row post-carousel-featured post-carousel">
                            @foreach($entertainment as $etrtmn)
                            <!-- post -->
                            ...

任何人都可以帮助我的代码？对不起我的英语不好

Answer 1

const nav = document.getElementById('nav')

for (let child of nav.children) {
    child.addEventListener('click', function () {
        let current = document.getElementsByClassName('active')
        
        // If there's no active class
        if (current.length > 0) {
            current[0].className = current[0].className.replace(' active', '')
        }
        
        // Add the active class to the current/clicked button
        this.className += ' active'
    })
}

*{
    box-sizing: border-box;
 }

.nav-wrapper{
    max-width: 150px;
 }
 
.nav-item{
    background-color: lightblue;
    padding: .5rem;
    margin: 0 0 2px 0;
    list-style: none;
    text-align: center;
    cursor: pointer;
    
 }
 
.nav-item:hover{
    background-color: rgb(63, 94, 134); 
    color: whitesmoke;
 }

.active{
    border-left: .5rem solid tomato;
 }

<div class="nav-wrapper">
    <ul id="nav">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About us</li>
        <li class="nav-item">Services</li>
        <li class="nav-item">Contact</li>
    </ul>
</div>