在 Javascript 中从 Div 中删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16154552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing class from a Div in Javascript
提问by CodeMonkey
I have a div section
我有一个 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>
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.
我试图在 div 中用作 href 的每个页面上做的是从 li 项目中删除类属性，该属性将其设为活动状态并将其分配给一个，我单击。
I have tried removeClass removeAttribute etc but nothing seems to be working for me. I want to use plain Javascript no jQuery
我尝试过 removeClass removeAttribute 等，但似乎没有任何效果。我想使用纯 Javascript 没有 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.
例如，我在游戏页面上的 JS 代码从 MyText 页面中删除了活动类并将其添加到游戏页面的 li 元素中。
回答by silly little me
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 .classNameproperty.
这两种方法都适用于现代浏览器。对于较旧的浏览器，使用相同的 DOM 选择，然后对该.className属性进行典型的字符串操作。
active.className = active.className.replace(/\bactive\b/, " ");
this.className += " active";
回答by Mihail
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(" ");
}
回答by Xotic750
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.classListand the removemethod
在较新的浏览器上，您可以使用element.classList和remove方法
