Question

首先我要解释一下情况：

我可以仅写入html的正文，这是因为一些限制。
我需要更换新网站（个人资料）。
问题是：菜单应显示或隐藏点击的部分......而不是。
我真的不太了解javascript，只是一点python，因为我得到了代码的一些问题，但我不会学习很多javascript，因为这可能只是一次我的一生。
我不想添加jQuery代码。

所以...我在http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_background中尝试了这个代码，（复制和粘贴，所以你也可以检查），但它没有按预期工作，菜单的功能不起作用。

<!DOCTYPE html><html><head></head><body><script>
function comandos() 
{
var visibilidaddecomandos = document.getElementById("comandos").style.display;
  if (visibilidaddecomandos == "hidden")
  {
    document.getElementById("comandos").style.visibility = "visible";
  }
  else if (visibilidaddecomandos == "visible")
  {
    document.getElementById("comandos").style.visibility = "hidden";
  }
return false;
}

document.write('<style> #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul> <li><a href="#" OnClick="comandos()"><span>Comandos</span></a></li><li><a href="#"><span>Estadisticas</span></a></li><li><a href="#"><span>Juegos</span></a></li><li><a href="#"><span>Sobre mi</span></a></li><li><a href="#"><span>Saelyth</span></a></li></ul> </div>');

document.write('<br><table id="global" style="background-color:#ffffff; width:460px; height:600px"><tr><td style="vertical-align:top"><table id="comandos" border="2" style="background-color:#000000; float:center"><tr><td><p style="color:red">Testing the ID table "comandos"</p></td></tr></table></td></tr></table>');


document.body.style.background="#66ffff url('http://images.wikia.com/xenosaga/images/8/86/KOSMOSWikiBG.jpg') no-repeat left top"
document.title = "¡My not working menu!";
window.stop();
</script>

</body></html>

Answer 1

虽然表格不是最佳做法..出于多种原因......一个是在显示数据之前必须加载整个表格。

Divs是你最好的朋友。

无论如何，这是我相信你正在寻找的解决方案。

 function comandos() 
{
var visibilidaddecomandos = document.getElementById("comandos").style.visibility;
  if (visibilidaddecomandos == "hidden")
  {
    document.getElementById("comandos").style.visibility = "visible";
  }
  else if (visibilidaddecomandos == "visible")
  {
    document.getElementById("comandos").style.visibility = "hidden";
  }
return false;
}

此外，您还必须为表添加默认可见性才能使其正常工作。

<table id="comandos" border="2" style="visibility:visible;background-color:#000000; float:center">

Answer 2

var visibilidaddecomandos = document.getElementById("comandos");
  if (visibilidaddecomandos.style.visibility == 'hidden')
  {
    visibilidaddecomandos.style.visibility = "visible";
  }
  else if (visibilidaddecomandos.style.visibility == "visible")
  {
    visibilidaddecomandos.style.visibility = "hidden";
  }

这将有效....

Answer 3

if（document.getElementById（“comandos”）。style.visibility ==“hidden”）{document.getElementById（“comandos”）。style.visibility ==“visible”;} else if（document.getElementById（ “comandos”）。style.visibility ==“visible”） {document.getElementById（“comandos”）。style.visibility ==“hidden”;}

希望这会有所帮助。

如何使用javascript检查表是否可见？

3 个答案: