1

首先，我将解释情况：

  1. 我只能写在 html 的正文中，这是因为一些限制。
  2. 我需要将网站（个人资料）替换为新网站。
  3. 问题是：菜单应该在点击时显示或隐藏部分......而不是。
  4. 我真的不太了解javascript，只知道一点python，因此我在代码上遇到了一些问题，但我也不会学习太多javascript，因为这可能只是一生中的一次我。
  5. 我不想添加 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>
4

3 回答 3

2

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

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">
于 2013-10-17T16:30:03.670 回答
1 
var visibilidaddecomandos = document.getElementById("comandos");
  if (visibilidaddecomandos.style.visibility == 'hidden')
  {
    visibilidaddecomandos.style.visibility = "visible";
  }
  else if (visibilidaddecomandos.style.visibility == "visible")
  {
    visibilidaddecomandos.style.visibility = "hidden";
  }

这将工作....

于 2013-10-17T14:40:12.423 回答
0

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";}

希望这会有所帮助。

于 2013-10-17T14:56:07.563 回答