Question

Javascript显示/隐藏标签和iFrame的功能：

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

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

if (id == "tab2") {
    document.getElementById(iFrame).className = " iFrame2";
}
else if (id == "tab1") {
    document.getElementById(iFrame).className = " iFrame1";
}

标签的更改有效，但底部的if语句似乎不起作用。

修改

问题是我有一个ID为'iFrame'的iFrame。现在我在css文件中创建了两个类：'iFrame1'和'iFrame2'，它们具有不同的设置，使iFrame看起来不同。上面的函数在更改'tabs'（将类“显示”添加到一个，将“隐藏”添加到所有其他）时没有问题。但它似乎没有将iFrames类更改为'iFrame2' and/or 'iFrame1' 我不能把它放在JSFiddle上因为我的网站很大程度上依赖于图片，所以我只是将你链接到我上传的地方：www.FeedtheSyrians.com

Answer 1

你的if语句不在函数体内，这意味着在调用函数时它不会被执行。

我不知道什么时候会被执行。我不是JS专家，我不想做出（受过教育的）猜测，也许有更多知识的人可以说。

Answer 2

您似乎没有在任何地方定义变量iFrame？

function ChangeStep(id)
{
  var iframeClass, iFrame = '???', divID, i;
  // hide all other tabs:
  for ( i=1; i<3; i++ ) 
  {
    divID = 'tabs' + i;
    if (divID != id) 
    {
      document.getElementById(divID).className = 'hide';
    }
  }
  // show this one
  document.getElementById(id).className = 'show';
  // show the iframe
  switch (id) 
  {
    case 'tab2': iframeClass = 'iFrame2'; break;
    case 'tab1': iframeClass = 'iFrame1'; break;
  }
  if ( iframeClass ) {
    document.getElementById(iFrame).className = iframeClass;
  }
}

当您使用不同的标签时，您是否也不希望隐藏和显示不同的iframe？而不是仅仅将一个类应用于单一的iframe？无论如何，只是我的两分钱。

更新

根据我所看到的，您链接到的网站应该使用以下代码：

document.getElementById('iFrame').className = iframeClass;

或者您应该在此之前定义变量，就像我在上面的示例中所做的那样，设置iFrame = 'iFrame'而不是'???'。

在完全独立的说明中，我会避免在您的网站上使用该图标;）

更新2

问题在于这一部分：

switch (id) 
{
  case 'tab2': iframeClass = 'iFrame2'; break;
  case 'tab1': iframeClass = 'iFrame1'; break;
}

从您的网站看来，您确实需要：

switch (id) 
{
  case 'tabs2': iframeClass = 'iFrame2'; break;
  case 'tabs1': iframeClass = 'iFrame1'; break;
}

注意添加's'以制作'tabs1'和'tabs2'

Answer 3

你有2个问题，函数的结束括号在if语句之前，我也没有看到id定义的任何地方。你正在通过id获取元素，但除非它被定义在其他地方，这就是问题

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

// show this one
document.getElementById(id).className = " show";
//} -- remove this
    if (id == "tab2") {
        document.getElementById(iFrame).className = " iFrame2";
    }
    else if (id == "tab1") {
        document.getElementById(iFrame).className = " iFrame1";
    }
} //add this

Answer 4

这些javascript if语句有什么问题？
var divID = 'tabs' + i;
if (divID !== null)

没用。 divID始终是字符串，而不是null。您可能想测试document.getElementById(divID)是否确实返回了元素或null。

}
if (id == "tab2")

它位于函数体之外，id变量可能未定义。

更好：

function ChangeStep(id) {
    for (var i=1; i<3; i++) {
        var div = document.getElementById('tabs' + i);
        if (div !== null)
            div.className = "show"; // or += " show";
                                    // and didn't you want to hide these?
    }
    // show this one
    document.getElementById(id).className = "show";
    // is the `iFrame` variable defined somewhere?
    if (id == "tab2")
        document.getElementById(iFrame).className = "iFrame2";
    else if (id == "tab1") {
        document.getElementById(iFrame).className = "iFrame1";
}

这个javascript if语句有什么问题

修改

4 个答案:

更新

更新2