Question

所以，我在使用JavaScript来保持元素的类更改时遇到了问题。每当我尝试将元素的类更改为“overlist”时，它的工作时间不到一秒，然后将其恢复为原始状态，即underlist。我无法找到一种方法来让它继续下去。

HTML：

<ul class="overlist">
    <li>
        <a onClick="activateTutorials()">Tutorials</a>
        <ul class="underlist Tutorials">
            <li>
                <a href="#" onClick="frame(1)">Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(2)">More Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(3)">Foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(4)">More foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(5)">Foo Guide</a>
            </li>
        </ul>
    </li>

CSS：

.underlist {
    display: none;
}

使用Javascript：

function activateTutorials(){

    if(document.getElementsByClassName('Tutorials').classList.contains('underlist')){

        document.getElementsByClassName('Tutorials').classList.remove('underlist');

    }else{

         document.getElementsByClassName('Tutorials').classList.add('underlist');

    }
};

Answer 1

一些调试思路：那么，首先你应该检查一下这个功能是否正在运行（对我来说不是）我这样修改了它：

<a href="#" onClick="javascript:activateTutorials();" class="Tutorials">Tutorials</a>

其次，getElementsByClassname返回一个数组，所以修改你的脚本如下：

function activateTutorials(){
console.log(document.getElementsByClassName('Tutorials'));
    if(document.getElementsByClassName('Tutorials')[0].classList.contains('underlist'))
 {
     document.getElementsByClassName('Tutorials')[0].classList.remove('underlist');
 }else{
     document.getElementsByClassName('Tutorials')[0].classList.add('underlist');
 }
};

您可能已经注意到函数开头的控制台语句，它是一种调试方法（在chrome中使用Ctrl + Shift + J访问它）。

使用Javascript更改类的问题

1 个答案: