Removing class from a Div in Javascript [duplicate]

Question

I have a div section

<div class="1">
        <div id="tab1"">
            <ul class="nav nav-tabs">                   
                <li class="active ans-tab"> <a href="{$cdn2}">MyText</a></li>
                <li class="topTab"><a href="{$cdn2}/Game/">Game</a></li>
                <li class="topTab"><a href="{$cdn2}/lb/">LB</a></li>
            </ul>
        </div>
       <div id="tab2">
        <ul class="nav nav-pills">
            <li class="active"> <a href="{$cdn2}">Top</a></li>
            <li><a href="{$cdn2}/categories/">Categories</a></li>
        </ul>
    </div>
</div>

What i am trying to do at each of the pages used as href in the div, is to remove class attribute from the li item which has it as active and assign it to the one, i click.

I have tried removeClass removeAttribute etc but nothing seems to be working for me. I want to use plain Javascript no jQuery

For e.g. my JS code on Game page removes active class from MyText page and add it to Game page's li element.

Answer 1

I assume only one is active at a time. To remove, you can do this:

var active = document.querySelector(".active");

active.classList.remove("active");

Then to add, do this:

// Assuming `this` is your element
this.classList.add("active");

---

Both of these will work in modern browsers. For older browsers, use the same DOM selection, then do typical string manipulation of the .className property.

active.className = active.className.replace(/\bactive\b/, " ");

this.className += " active";