add or remove show active class on div

Question

i want to add show active on div if clicked li and remove them if another li clicked

i have this code

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

and for add-remove on class tab-pane fade show active on difference div below just have "tab-pane fade"

<!-- 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 -->
                            ...

anyone can help my code ? sorry for my bad english

Does this answer your question? [How to add and remove classes in Javascript without jQuery](https://stackoverflow.com/questions/26736587/how-to-add-and-remove-classes-in-javascript-without-jquery) — Saikat Roy, Feb 07 '22 at 05:31
I'd suggest alpinejs. It makes a great combination with laravel. e.g. https://codepen.io/smashingmag/pen/LYVjBXm See documentation here: https://alpinejs.dev/directives/show — Kevin Y, Feb 07 '22 at 05:38

Dor Katzir · Answer 1 · 2022-03-04T17:03:25.100

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>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 03 '22 at 10:21

add or remove show active class on div

1 Answers1