javascript - 从 Javascript 中的 Div 中删除类

Question

我有一个 div 部分

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

我在 div 中用作 href 的每个页面上尝试做的是从 li 项中删除类属性，并将其分配给一个，我单击。

我试过 removeClass removeAttribute 等，但似乎没有什么对我有用。我想使用纯 Javascript 而不是 jQuery

例如，我在游戏页面上的 JS 代码从 MyText 页面中删除活动类并将其添加到游戏页面的 li 元素中。

Answer 1

我假设一次只有一个处于活动状态。要删除，您可以执行以下操作：

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

active.classList.remove("active");

然后添加，执行以下操作：

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

---

这两种方法都适用于现代浏览器。对于较旧的浏览器，使用相同的 DOM 选择，然后对.className属性进行典型的字符串操作。

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

this.className += " active";

Answer 2

尝试删除类的功能：

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(" ");
}

Answer 3

像这样

.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);

在jsfiddle上

在较新的浏览器上，您可以使用element.classList和remove方法