Javascript切换可见性问题

好吧，我试图让这块Javascript工作。另外，我对Javascript完全陌生。基本上我想要做的是我的页面左侧有一个菜单，其中包含链接：主页，关于，回复，脚本练习，最终项目和列出的联系人。它们中的每一个在我的CSS页面上都有一个带标签的div id（即#home，#about，#response ...），并且它们都放置在页面上的相同位置并被隐藏。点击链接时，相应的div id应该在页面上可见。我正在使用的代码是这样的：Javascript切换可见性问题

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" 

    }

我通过费利佩Bottrel索萨1998年

的问题是改编自一个老剧本，我发现名为淡入菜单脚本的代码，这个脚本在IE ，Chrome和Safari，但不在Firefox中。

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

来源

2011-07-19 Daniel

每日经验教训：不要使用1998年编写的Javascript代码。 – MooGoo

并了解Firefox如何不会从您的代码中获取任何猜测的难题：D喜欢这个浏览器 – Cystack

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

来源

2011-07-19 00:10:49

给予的东西是id不应该自动给它在JavaScript的名称。许多浏览器都是为了与旧代码兼容而做的，但正如您已经注意到它不可靠并且应该避免。

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

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

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

来源

2011-07-19 00:11:02

这里有一个更加紧凑的实现代码：

使页面中的所有这些对象都具有与这些名称匹配的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这样的现代库，您可以给每个对象设置一个特定的类名称，然后您可以使用该类名称将该页面中的所有对象获取到一个函数调用中的数组中然后对该阵列中的项目进行操作。这是更易于维护的，因为如果页面内容发生变化，代码不必更改为匹配。

来源

2011-07-19 00:26:54 jfriend00

我推荐使用像jQuery，原型，MooTools或其他的JavaScript库。任何东西。

如果您是JavaScript新手，请不要完全浪费时间熟悉DOM。它会永远占用你的资源，而且你仍然无法做到其他人可以超速的功能，而且你不会通过浏览器，高性能地完成错误。

例如，您正在努力的代码可以做这样的事情。对于初学者来说，因为他们都在（理论上）一个div容器和互为兄弟姐妹，应该是超级简单：

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

哇！一行代码。十分简单。不要浪费时间与原始的JavaScript！

来源

2011-07-19 00:29:25 ErikE

从理论上讲，所有的JS代码都可以缩小到一行;-) –

@萨缪尔理论上，你*可能*有能力说出感。 – ErikE

Javascript切换可见性问题

回答

相关问题