0

显示/隐藏选项卡和 iFrame 的 Javascript 函数：

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 文件中创建了 2 个类：它们具有不同的设置，'iFrame1'并且'iFrame2'使 iFrame 看起来不同。上面的函数在更改'tabs'（将“Show”类添加到一个并将“Hide”添加到所有其他类）时没有问题。但它似乎并没有将 iFrames 类更改为'iFrame2' and/or 'iFrame1' 我不能把它放在 JSFiddle 上，因为我的网站严重依赖图像，所以我只会将你链接到我上传它的地方：www.FeedtheSyrians.com

4

4 回答 4

5

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

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

于 2013-06-02T23:40:52.073 回答
1

您似乎没有在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'

于 2013-06-02T23:58:02.893 回答
0

这些 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";
}
于 2013-06-02T23:52:41.477 回答
0

你有 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
于 2013-06-02T23:42:23.330 回答