0

我正在使用 Javascrip，我有一个类似下面的函数，我想隐藏所有 div。但我不知道为什么这段代码不起作用。有人会帮我吗？

Javasvript

 function showDiv(divTag,id)
    {
     var i;
      for(i=1;i<7;i++)
     {
       document.getElementById(divTag+i).style.display = 'none';
     }
      document.getElementById(divTag+id).style.display = 'block';
    }

或者

function showDiv(divTag,id)
{
  var i;
  for(i=1;i<5;i++)
 {
   var tempDiv = divTag + i;
   document.getElementById(tempDiv).style.display = 'none';
 }
document.getElementById(divTag+id).style.display = 'block';
}

和 HTML

 <a href="#" onClick="showDiv(\"hide_\",1)">Show Only Div1</a>
    <div id="hide_1">
    Abc
    </div>
     <a href="#" onClick="showDiv(\"hide_\",2)">Show Only Div2</a>

    <div id="hide_2">
    BCD
    </div>
<a href="#" onClick="showDiv(\"hide_\",3)">Show Only Div2</a>

    <div id="hide_3">
    EDF
    </div>
<a href="#" onClick="showDiv(\"hide_\",4)">Show Only Div2</a>

    <div id="hide_4">
    FGE
    </div>

我尝试过但未能做到的以上两个过程

4

2 回答 2

1

几件事：

  1. ( "onclick"not "onClick") 是在 html 和 JavaScript 中分配 click 事件处理程序的正确方法。
  2. 您在for(i=1;i<7;i++)第一个函数的行中从 1 循环到 6，但您的 html 中只有 4 个元素。当达到不存在的第五个时-您的代码将引发错误。类似于“TypeError：无法读取 null 的属性 'style'”的内容。
  3. 正如@verisimilitude 所提到的，您的html 中有一个语法错误，您将引用的文本放在另一个以相同方式引用的文本中。应该是onclick="showDiv('hide_',1)"。注意'hide_'周围的单引号。

这是有效的代码。点击这里查看它的实际效果。

这是您的 JavaScript 函数：

// Please note that it must be in the global scope
// otherwise you won't be able to call it from your html.

function showDiv(divTag, id) {
  var i;
  for (i = 1; i < 5; i++) {
    var tempDiv = divTag + i;
    document.getElementById(tempDiv).style.display = 'none';
  }
  document.getElementById(divTag+id).style.display = 'block';
}

此外，请查看代码的另一个工作版本，该版本在隐藏/显示元素之前预先验证元素的存在。因此，您不必担心for循环遍历已删除的元素。

这是你的html：

<a href="#" onclick="showDiv('hide_', 1);">Show Only Div1</a>
<div id="hide_1">Div1</div>

<a href="#" onclick="showDiv('hide_', 2);">Show Only Div2</a>
<div id="hide_2">Div2</div>

<a href="#" onclick="showDiv('hide_', 3);">Show Only Div3</a>
<div id="hide_3">Div3</div>

<a href="#" onclick="showDiv('hide_', 4);">Show Only Div4</a>
<div id="hide_4">Div4</div>​
于 2012-05-22T05:23:09.850 回答
0 
<a href="#" onClick="showDiv("hide_",1)">Show Only Div1</a>

产生一个 javascript 语法错误。这应该是

<a href="#" onClick="showDiv('hide_',1)">Show Only Div1</a>

检查“hide_”周围的单引号

于 2012-05-22T05:13:01.483 回答