[英]My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I used or what
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:
<div id="tabs1" class="hide"><h1>Step 1</h1></div>
<div id="tabs2" class="show"><h1>Step 2</h1></div>
My Css: 我的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. 这应该通过添加类“隐藏”或“显示”来完成,具体取决于它是隐藏还是可见。
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). 您总是附加类名,因此它们(在显示一次之后)将成为show
和hide
类的成员,并且两个规则集都将应用(以正常的级联顺序)。
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. 如果确实需要在元素上维护其他类,则可以使用classList
。
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. 如果您需要支持Old-IE,那么您可以使用classList
(可能在classList
运行regex)或提供类似功能的API。 Most common JS libraries (such as YUI and jQuery) have one built in. 最常见的JS库(例如YUI和jQuery)内置了一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.