Question

我的index.php中有一个按钮，显示一个菜单并隐藏页面内容。但是，它假设适用于两个不同的模板。我的功能基本上是这样的：

function show_menu();
{
document.getElementById('menu').style.display="block";
document.getElementById('content1').style.display="none";
document.getElementById('content2').style.display="none";
}

如果我只放入其中一个内容，请将其隐藏起作用。但是，如果我把两个内容都没有。这是怎么回事？这是不可能的还是我做错了什么？

Answer 1

我不确定我是否正确地解决了您的问题，但如果我这样做，问题是，您无法设置页面上不存在的元素样式。您必须检查null值：

function show_menu()
{
document.getElementById('menu').style.display="block";

var content1 = document.getElementById('content1'),
    content2 = document.getElementById('content2');

if (content1) {
    content1.style.display="none";
}
if (content2) {
    content2.style.display="none";
}
}

Answer 2

function show_menu() //Removed the semicolon, could be the culprit causing the problem
{
  document.getElementById('menu').style.display="block";
  document.getElementById('content1').style.display="none";
  document.getElementById('content2').style.display="none";
}

Answer 3

我猜您的某个模板中没有content1 id的元素。然后，当访问不存在元素的style属性时，代码将失败，停止执行脚本而不隐藏content2。

我想到了三种可能的解决方案：

在所有模板中使用相同的ID。如果两者都包含具有相同功能目的的content，则应将它们命名为相同。然后，您的脚本将适用于所有这些模板。
使用不同的脚本或指示使用哪个模板的变量，以便脚本可以确定正确的ID。
动态检查元素的存在（你总是应该这样做）：

function show_menu() {
    var menu = document.getElementById('menu'),
        content1 = document.getElementById('content1'),
        content2 = document.getElementById('content2');

    if (menu)
        menu.style.display="block";
    if (content1)
        content1.style.display="none";
    if (content2)
        content2.style.display="none";
}

是否可以使用独特的javascript函数隐藏来自两个不同.php页面的两个div？

3 个答案: