我的Javascript不起作用。(My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I

我的Javascript不起作用。(My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I used or what)

我的功能：

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

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

My function:

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

How I'm calling it:

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

The Divs I want to show/hide:

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

My Css:

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

Basically what I want to do is: When I click Next or Previous, show the corresponding "Tab" by hiding all the others and showing this. This should be done by adding the class "Hide" or "Show" depending on if it is to be hidden or visible.

最满意答案

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

如果您不需要维护任何其他类，则可以使用简单赋值替换追加运算符+= ： =

如果确实需要在元素上维护其他类，则可以使用classList 。

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

如果您需要支持Old-IE，那么您可以使用classList （可能在classList运行regex）或提供类似功能的API。 最常见的JS库（例如YUI和jQuery）内置了一个。

You are always appending class names, so they will (after being shown once) be members of both the show and hide classes and both rulesets will apply (in the normal cascade order).

If you don't need to maintain any other classes, you can replace your append operator += with a simple assignment: =

If you do need to maintain other classes on the elements, then you can use classList instead.

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

If you need to support Old-IE then you can use a polyfill (which will probably run regex over the classList) or an API that provides similar functions. Most common JS libraries (such as YUI and jQuery) have one built in.

我的Javascript不起作用。(My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I used or what)

我的功能：

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

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

My function:

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

How I'm calling it:

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

The Divs I want to show/hide:

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

My Css:

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

Basically what I want to do is: When I click Next or Previous, show the corresponding "Tab" by hiding all the others and showing this. This should be done by adding the class "Hide" or "Show" depending on if it is to be hidden or visible.

最满意答案

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

如果您不需要维护任何其他类，则可以使用简单赋值替换追加运算符+= ： =

如果确实需要在元素上维护其他类，则可以使用classList 。

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

如果您需要支持Old-IE，那么您可以使用classList （可能在classList运行regex）或提供类似功能的API。 最常见的JS库（例如YUI和jQuery）内置了一个。

You are always appending class names, so they will (after being shown once) be members of both the show and hide classes and both rulesets will apply (in the normal cascade order).

If you don't need to maintain any other classes, you can replace your append operator += with a simple assignment: =

If you do need to maintain other classes on the elements, then you can use classList instead.

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

If you need to support Old-IE then you can use a polyfill (which will probably run regex over the classList) or an API that provides similar functions. Most common JS libraries (such as YUI and jQuery) have one built in.