javascript - 我的 Javascript 不工作。不知道它是不是函数，我是怎么调用它的，我使用的 CSS 还是什么

Question

我的功能:

function ChangeStep(id)
{
    var i = 1;

    // hide all other tabs:
    while(i<10) {
        var divID = 'tabs' + i;
        if (divID !== null) {
            document.getElementById(divID).className += " hide";
        }
        i++;
    }

    // show this one
    document.getElementById(id).className += " show";
}

我是怎么调用它的:

<div id="prev"><img src="img/prv.png" onClick="ChangeStep('tabs1'); return false;"></div>
<div id="next"><img src="img/nxt.png" onClick="ChangeStep('tabs2'); return false;"></div>

我要显示/隐藏的 Div:

<div id="tabs1" class="hide"><h1>Step 1</h1></div>
<div id="tabs2" class="show"><h1>Step 2</h1></div>

我的CSS:

.hide { visibility: hidden; }
.show { visibility: visible; }

基本上我想要做的是:当我单击“下一个”或“上一个”时，通过隐藏所有其他选项卡并显示它来显示相应的“选项卡”。这应该通过添加类“隐藏”或“显示”来完成，具体取决于它是隐藏还是可见。

Answer 1

您总是附加类名，所以它们(在显示一次后)将成为 show 和 hide 类的成员，并且两个规则集都将应用(在正常的级联顺序)。

如果您不需要维护任何其他类，您可以用一个简单的赋值替换您的追加操作符+=:=

如果你确实需要在元素上维护其他类，那么你可以使用classList相反。

document.getElementById(divID).classList.remove('show');
document.getElementById(divID).classList.add('hide');

如果您需要支持旧版 IE，则可以使用 polyfill(它可能会在 classList 上运行正则表达式)或提供类似功能的 API。大多数常见的 JS 库(例如 YUI 和 jQuery)都内置了一个。