10

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.

CodeMonkey
  • 2,265
  • 9
  • 48
  • 94
  • 1
    `element.className = ''`? Or `x = element.className.split(' '); x.splice(x.indexOf('classToRemove'),1); element.className = x.join(' ')`? – TwiNight Apr 22 '13 at 18:56
  • possible duplicate of [How to remove the class in javascript?](http://stackoverflow.com/questions/13505253/how-to-remove-the-class-in-javascript) and even better: [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript/196038) – Felix Kling Apr 22 '13 at 19:00
  • Something like this? http://jsfiddle.net/EKuEz/1/ – Alxandr Apr 22 '13 at 19:16

3 Answers3

27

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";
silly little me
  • 581
  • 3
  • 4
  • Here's the browser support chart for `classList`: http://caniuse.com/#search=classList – ryanbrill Apr 22 '13 at 19:08
  • – CodeMonkey Apr 22 '13 at 20:11
0

Try function for removing a class:

function removeClass (parentEl, classToBeRemoved) { // DOM element, className for remove.
    var classes = parentEl.className.split(" ");

    for (var i = 0; i < classes.length; i++) {
        if (classes[i] == classToBeRemoved) {
            // Remove class.
            classes.splice(i, 1);
        }
        break;
    }
    parentEl.className = classes.join(" ");
}
Joshua
  • 5,032
  • 2
  • 29
  • 45
Mihail
  • 1,469
  • 11
  • 13
0

Like this

.bold {
    font-weight: bold
}
.red {
    background: red
}

<div id="theDiv" class="bold red">Bold and red</div>
<button id="button">Remove red</button>

var theDiv = document.getElementById("theDiv");
var button = document.getElementById("button");

function removeRed() {
    var classContent = theDiv.className;

    theDiv.className = classContent.replace("red", "").trim();
}

button.addEventListener("click", removeRed, false);

on jsfiddle

On newer browsers you can use element.classList and the remove method

Xotic750
  • 22,914
  • 8
  • 57
  • 79