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"

     }

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

问题是，此脚本适用于IE，Chrome和Safari，但不适用于Firefox。

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

Answer 1

给某些内容id不应该自动在JavaScript中为其命名。许多浏览器都是为了兼容旧代码，但是你已经注意到它不可靠，应该避免使用。

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

例如，您可以使用home替换document.getElementById("home")的每个实例，或者在您第一次使用时定义要访问的所有元素：

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

Answer 2

调用变量“home”，“about”等不指向div ID，除非您在页面加载时设置它们。试试这个：

var home, about, response, script, project, contact, listx;
window.onload = function() {
    home = document.getElementById('home');
    about = document.getElementById('about');
    response = document.getElementById('response');
    script = document.getElementById('script');
    project = document.getElementById('project');
    contact = document.getElementById('contact');
    listx = document.getElementById('listx');
}

Answer 3

这是一种更加紧凑的编码方式：

使页面中的所有这些对象都具有与这些名称匹配的CSS ID。

var hideList = ["home", "about", "response", "script", "project", "contact"];

function show(listx) {
    for (var i = 0; i < hideList.length; i++) {
        document.getElementById(hideList[i]).style.visibility = "hidden";
    }
    document.getElementById(listx).style.visibility = "visible";
}

我认为show()和shows()不需要单独的函数，因为它们只在传递的参数中有所不同，因此您只需将相应的对象名称传递给一个函数。

如果你使用像jQuery或YUI这样的现代库，你可以只给每个想要隐藏特定类名的对象，然后你可以在一个函数调用中将具有该类名的页面中的所有对象提取到一个数组中。然后操作该数组中的项目。这更易于维护，因为如果页面内容发生更改，则不必更改代码以匹配。

Answer 4

我建议使用jQuery，prototype，MooTools等javascript库。任何东西。

如果您是javascript的新手，请不要浪费时间熟悉DOM。这将永远带你离开，你仍然无法拥有其他人可以超级快速的东西，而且你不会通过跨浏览器，性能完成来完成错误。

例如，您正在努力解决的代码可能就是这样做的。对于初学者来说，因为他们都在（理论上）是一个容器div并且是彼此的兄弟姐妹，所以它应该是超级简单的：

$('#listx').show().siblings().hide();

哇！一行代码。十分简单。停止用原始的javascript浪费时间！

Javascript切换可见性问题

4 个答案: