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项中删除class属性，将其作为活动状态并将其分配给一个，我点击。

我已经尝试过removeClass removeAttribute等，但似乎没有什么对我有用。我想使用普通的Javascript no jQuery

例如我在游戏页面上的JS代码从MyText页面中删除了活动类，并将其添加到Game页面的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);

on jsfiddle

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

在Javascript中从Div中删除类

3 个答案: