Javascript切换可见性问题

Javascript Toggling Visibility Question

本文关键字：可见性问题 Javascript      更新时间：2023-09-26

好的，我想让这段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中工作。

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

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

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

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

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

调用变量"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');
}

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

如果你是javascript新手，不要浪费时间去熟悉DOM。这将花费你很长时间，你仍然无法做到别人可以超级快的东西，你不会跨浏览器完成它，性能，bug解决了。

例如，您正在努力处理的代码可以这样做。对于初学者来说，因为它们(理论上)都在一个容器div中，并且彼此是兄弟姐妹，所以应该非常简单:

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

哇!一行代码。容易peasy。不要再浪费时间在javascript上了!

这里有一种更紧凑的编码方式:

让所有这些对象在你的页面有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这样的现代库，你可以给每个对象隐藏一个特定的类名，然后你可以在一个函数调用中获取页面中所有具有该类名的对象到一个数组中，然后对该数组中的项进行操作。这更容易维护，因为如果页面的内容改变了，代码不需要修改来匹配。

相关文章：