点击时取消隐藏元素

时间:2013-10-10 18:07:16

标签: javascript html onclick hidden

我对JavaScript有一点问题。我不确定我的代码是否不起作用,或者我是否以错误的方式午餐。

<title>Untitled Document</title>
<script language="javascript">
function Unhide()
{
 var item = document.getElementsByTagName('p');
 for (x; x > item.length; x+1)
 {
     if (item.item(x).getAttribute('hidden') == ('true'))
     {
        item.item(x).setAttribute('hidden', 'false');
     }
     else
     {
         item.item(x).setAttribute('hidden', 'true');
     }
 }
}
</script>
</head>

<body>
<div class="Level1">
 <p class="Menu"><a href=".\Index.html">Home</a></p>
  <div class="Level2">
   <p class="Menu"><a href=".\Artykol1.html">Artykół 1</a></p>
   <p class="Menu"><a href=".\Artykol2.html">Artykół 2</a></p>
   <p class="Menu"><a href=".\Artykol3.html">Artykół 3</a></p>
   <p class="Menu"><a href=".\Autorska.html">Artykóły Autorskie</a></p>
  </div>   
 <p class="Menu"><a href=".\Dziennik.html">Dziennik</a></p>
 <p class="Menu"><a href=".\Archiwum.html">Archiwum</a></p>
 <div class="Level2">
  <p class="Menu"><a onclick="Unhide()">Ostatni Tydzień</a></p>
  <div class="Level3">
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art1_Autor.html">Art1</a></p>
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art2_Autor.html">Art2</a></p>
  </div>
 </div>
</div>
</body>

你能给我一些提示,如何解决这个问题?

3 个答案:

答案 0 :(得分:1)

function Unhide()
{
 var items = document.getElementsByTagName('p');
 for (var x in items)
 {
     if (x.style.display == 'none')
     {
        x.style.display = '';
     }
     else
     {
         x.style.display = 'none';
     }
 }
}

items是一个元素数组。使用for循环遍历它们并设置style.display属性。

参考:http://www.w3schools.com/jsref/prop_style_display.asp

答案 1 :(得分:0)

http://davidwalsh.name/html5-hidden

<script>
function Unhide()
{
 var items = document.getElementsByTagName('p');
 for ( var x = 0; x < items.length; x++)
 {
     var item = items[x]; 
     if (item.getAttribute('hidden') == 'true')
     {
        item.setAttribute('hidden', 'false');
     }
     else
     {
         item.setAttribute('hidden', 'true');
     }
 }
}
</script>

<div class="Level1">
 <p class="Menu"><a href=".\Index.html">Home</a></p>
  <div class="Level2">
   <p class="Menu"><a href=".\Artykol1.html">Artykół 1</a></p>
   <p class="Menu"><a href=".\Artykol2.html">Artykół 2</a></p>
   <p class="Menu"><a href=".\Artykol3.html">Artykół 3</a></p>
   <p class="Menu"><a href=".\Autorska.html">Artykóły Autorskie</a></p>
  </div>   
 <p class="Menu"><a href=".\Dziennik.html">Dziennik</a></p>
 <p class="Menu"><a href=".\Archiwum.html">Archiwum</a></p>
 <div class="Level2">
  <p class="Menu"><a onclick="Unhide()">Ostatni Tydzień</a></p>
  <div class="Level3">
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art1_Autor.html">Art1</a></p>
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art2_Autor.html">Art2</a></p>
  </div>
 </div>
</div>

答案 2 :(得分:0)

为我工作:

item.attr('hidden', false);

,但前提是该项目的属性如下:

hidden="true"

不仅“隐藏”。