Question

我正在使用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>

我尝试过的两个abov过程都没有做到

Answer 1

有几件事：

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

这是有效的代码。的 Click here to see it in action

这是您的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'; }

另外，请先查看 another working version of your code ，然后在隐藏/显示元素之前预先验证元素是否存在。因此，您不必担心您的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>

Answer 2

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

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

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

检查“hide _”

周围的单引号

通过循环显示所有div并显示我想要显示的特定div

2 个答案: