Javascript 切换可见性问题

Question

好吧，我正在尝试让这段 Javascript 工作。另外，我对 Javascript 完全陌生。本质上，我想做的是在我的页面左侧有一个菜单，其中包含以下链接:主页、关于、响应、脚本练习、最终元素和列出的联系人。在我的 CSS 页面上，每一个都有一个标记的 div id(即#home、#about、#response ...)，并且所有这些都放置在页面上的相同位置并被隐藏。单击链接时，相应的 div id 应该在页面上可见。我使用的代码是这样的:

function show(listx) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listx.style.visibility = "visible"

     }

function shows(listz) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listz.style.visibility = "visible"

     } 

我根据 Felipe Bottrel Souza 1998 年发现的名为 Fade in Menu Script 的旧脚本改编了这段代码。

问题是，此脚本在 IE、Chrome 和 Safari 中有效，但在 Firefox 中无效。

非常感谢任何想法/帮助!

Answer 1

给某物一个 id 不应该在 JavaScript 中自动给它一个名字。许多浏览器这样做是为了与旧代码兼容，但正如您所注意到的那样，它不可靠，应该避免。

相反，您应该使用 document.getElementById 方法通过 id 引用元素。

例如，您可以将 home 的每个实例替换为 document.getElementById("home")，或者定义您希望首次访问的所有元素你使用它们:

var home = document.getElementById("home");