在Javascript中从Div中移除类

Removing class from a Div in Javascript

本文关键字：Div Javascript 中从      更新时间：2023-09-26

我有一个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元素。

我假设一次只有一个是活动的。要删除，可以这样做:

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

像这样

.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方法

尝试移除一个类的函数:

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(" ");
}
相关文章：